HTML前端常用标签(复习)

. HTML 初识

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

所谓超文本，有2层含义：

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

标题标签       	<hx></hx>     
段落标签     		<p></p>
水平线标签			<hr />
 换行标签       <br/>
 无语义标签    <div></div>   和 <span></span>             注:这两个标签在后期经常使用

文本格式化标签

<b></b>和<strong></strong>		 文字加粗
<i></i>和<em></em>	               	斜体
<s></s>和<del></del>	            	加删除线
<u></u>和<ins></ins>		            加下划线

图片标签

<img src="图像URL" />	src  图像路径	图像标签	<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

属性:

alt 文本,图像不显示时显示文字<img src="" alt="">

title 文本,鼠标悬停时显示内容<img src="cz.jpg" title="文本" />

width 图像宽度<img src="cz.jpg" width="300" height="300" />

height 图像高度<img src="cz.jpg" width="300" height="300" />

border 设置图像边框宽度<img src="cz.jpg" border="3" />

链接标签

<a href="#" target="目标窗口的弹出方式">文本或图像</a>

属性：

href (链接地址)必须写	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能			1. 外部链接需要添加 http:// www.baidu.com 2. 内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a > 3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。 4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
target (默认当前窗口打开,可新建窗口打开)	用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

锚点标签

id=""

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。

使用相应的id名标注跳转目标的位置。 (找目标)

base标签

base 可以设置整体链接的打开状态

base 写到 <head> </head> 之间

预格式化标签

标签可定义预格式化的文本。

所谓的预格式化文本就是，按照我们预先写好的文字格式来显示页面，保留空格和换行等。

表格标签

<table> 定义表格标签 <tr> 定义表格行 <td></td> 表格数据 </tr> </table>	border	设置表格边框(默认border="0"无边框)	<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
	cellspacing	设置单元格与单元格之间的空白间距 (默认2像素)
	cellpadding	设置单元格内容与单元格边框之间的空白间距 (默认1像素)
	width	设置表格的宽度
	height	设置表格的高度
	align	设置表格在网页中的水平对齐方式 (三个属性:left左 center中 right右 )	align="center" align="right"
	caption	caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。	<caption>个人信息表</caption>
	rowspan="合并单元格的个数"	跨行合并	合并的顺序我们按照先上后下先左后右的顺序
	colspan="合并单元格的个数"	跨列合并	<td colspan="3"> </td>
	<caption></caption>	表格标题标签
	<tr></tr><td></td>	标签，他就像一个容器，可以容纳所有的元素	<tr><td></td></tr>
	<th><td>	一般表头单元格位于表格的第一行或第一列，并且文本加粗居中	<th><td></td></th>
	<thead> 于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！	以上标签都是放到table标签中。	更好的给表格划分结构
	<tbody> 用于定义表格的主体。放数据本体。	以上标签都是放到table标签中。
	<tfoot>放表格的脚注之类。	以上标签都是放到table标签中。

列表标签

列表(ul里面只能包含li ,li里面可以包含标签)	<ul><li></li></ul>	无序列表	1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。 3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	<ol><li></li></ol>	有序列表	所有特性基本与ul 一致。但是实际中比无序列表用的少很多。	里面只能包含li 有顺序，使用情况较少
	<dl> <dt>名词1</dt> <dd>名词1解释1</dd> </dl>	自定义列表		里面有2个兄弟， dt 和 dd

input控件

<input type="属性值" value="你好">	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文本域
name	由用户自定义	控件的名称	用户名:<input type="text" name=“username” />
value	由用户自定义	input控件中的默认问本值	用户名:<input type="text" name="username" value="请输入用户名">
size	正整数	input控件在页面中的显示宽度
checked 默认被选中	checked	定义选择控件默认被选中的项	<input type="radio" name="sex" value="女" />女
maxlength	正整数	控件允许输入的最多字符数

<label> </label>

<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>	第一种用法就是用label直接包括input表单。		当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面
<label for="sex">男</label> <input type="radio" name="sex" id="sex">	第二种用法 for 属性规定 label 与哪个表单元素绑定。		当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面

文本域

通过textarea控件可以轻松地创建多行文本输入框.

cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

select下拉列表

在option 中定义selected =" selected "时，当前项即为默认选中项。

form表单域

<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>	action 属性值:url地址	用于指定接收并处理表单数据的服务器程序的url地址。
	method 属性值:get/post	用于设置表单数据的提交方式，其取值为get或post。
	name 属性值:名称	用于指定表单的名称，以区分同一个页面中的多个表单。

以上标签基本包含了前端开发所需常用标签.来自本人,黑马程序员.传智播客学习笔记.

以下是个人笔记整理,需要请关注私信我.

希望本人笔记能对各位有所帮助.

前端不难,难的在于东西多和杂.每天努力学习一点点,不放弃.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了。

三年前，我写过 Flexbox 的介绍，但是有些地方写得不清楚。今天，我看到一篇教程，才意识到一个最简单的表单，就可以解释 Flexbox，而且内容还很实用。

下面，你只需要10分钟，就可以学会简单的表单布局。

一、元素

表单使用<form>元素。

上面是一个空表单。根据 HTML 标准，它是一个块级元素，默认将占据全部宽度，但是高度为0，因为没有任何内容。

二、表单控件

现在，加入两个最常用的表单控件。

上面代码中，表单包含一个输入框（<input>）和一个按钮（<button>）。

根据标准，这两个控件都是行内块级元素（inline-block），也就是说，它们默认并排在一行上。

在线咨询

上一篇：Web前端开发基础知识，设置网页背景图，如何在网页中插入图片
下一篇：第3天 - 16天搞定前端，html基础标签，一点都不基础？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML前端常用标签(复习)

. HTML 初识

您的项目需求