美文网首页
笔记《二》-各种标签

笔记《二》-各种标签

作者: Mae_grace | 来源:发表于2020-06-09 15:27 被阅读0次

一:语义标签

语义化:更好被理解,被收录,被阅读

1、<p></p>段落

2、<span></span>没有语义,为了设置单独的样式用的

<head>中:

<style>

span{color:blue;}

</style>

body中:

<p>德生科技放到上附近的开始就发就

<span>这块字是蓝色的</span>范德萨佛挡杀佛是佛挡杀佛

</p>

3、<h1></h1>....<h6></h6>字号逐渐变小

4、<div></div>:具有相同逻辑,相似布局的一组内容可以放到同一个div容器下

5、<header></header>定义头部区域,写到body中,不是head中,<header>标签和<head>标签没关系

6、<footer></footer>网站的尾部、底部

7、<section></section>定义一个区域。

8、<aside></aside>定义一个侧边栏区域。

二:效果标签

1、<br  />换行

2、&nbsp 空格,需要几个空格就是几个&nbsp

3、<hr />分割线

三、列表标签

1、<ul>  <li></li>  </ul> 没有顺序,前面是小黑点

2、<ol>  <li></li>  </ol>有前后顺序,前面是序号

四:图片、链接标签

图片:<img ..... />(输入img,编译器会提示的)

链接:

1、<a href="" title=""></a>

2、<a href="" title="" target="_self"></a> --------在当前页面打开

3、<a  href="" title="" target="_bank"></a>------在新窗口打开

五:表格标签

1、<table border="1"></table>

2、<caption></caption>------表格标题

3、<tr></tr>-----一行

4、<th></th>----列,第一行上的列,表头,加黑加粗的

5、<td></td>---列,后几行的列,非表头

6、<thead><tbody><tfooter>表头、表身、表尾

加上这三个的好处:
(1)分组

(2)<table>是都加载完才显示的,而加上这些结构后tbody包含行的内容下载完优先显示,如果tbody很长,可以一部分一部分地显示

(3)如果分页显示,打印时加上head和footer的,每页都会有head和footer的内容

<table>

    <thead><tr><th></th></tr></thead>

    <tbody><tr><td></td><td></td></tr></tboody>

    <tfooter><tr><td></td></tr></tfooter>

</table>

六:表单标签

表单:<form method=""   action="" ></form>

1、<input type="" name="" value="" placehold="">

1.1、name为输入框命名

1.2、value默认值

1.3、placeholder,缺省

1.4、type为text,文本输入框

1.5、type为password,密码输入框

1.6、type为number时,只能输入数字,右边有递增递减按钮

1.7、type为url,数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

1.8、type为email,输入框的类型为邮箱,必须有@,并且@之后有内容

1.9 type为radio,单选框;checkbox复选框

1.9.1、<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

1.9.1.1、value为值;name为控件名;checked为选中状态

1.10 type为submit时,按钮有提交的作用 type="submit"value="提交" name="submitBtn">

1.11、type为reset时,重置 <input type="reset" value="重置">

2、<textarea rows="" cols="" placeholder=""></textarea>

2.1、rows行(高),cols列(宽),placeholder

3、<label for="控件id名称"></label>

3.1、input的id和label的for是同一个值

4、<select> <option></option> </select>---下拉框

<select>

            <option value="看书">看书</option>

            <option value="旅游" selected = "selected">旅游</option>

            <option value="运动">运动</option>

            <option value="购物" >购物</option>

   </select>

相关文章

网友评论

      本文标题:笔记《二》-各种标签

      本文链接:https://www.haomeiwen.com/subject/swlstktx.html