其他分享
首页 > 其他分享> > web开发(2): html标签/语义

web开发(2): html标签/语义

作者：互联网

chapter2 html 标签

在sublime中敲入！， 按tab 进行拓展，得到如下框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<html> 元素定义了整个 HTML 文档。<body> 元素定义了 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

（一）标题

 <h1>到<h6>,一级标题到六级标题

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

1,2,3 字号大小不同，1最大。

注：浏览器会自动地在标题的前后添加空行。

注：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

（二）段落<p>

<p>This is a paragraph</p>

段落内部文字忽略连续 空格，连续空格看做一个空格，也不会显示空行，也不会换行。

如果要加空格，需要 &nbsp;  注意分号要加。

如果要空一行， 需要<br/> 标签定义换行，是在不产生一个新段落的情况下进行换行。

注：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

如果想要呈现 空格与空行，需要用 预格式文本<pre>

 

 （三）链接<a>

<a href="http://www.w3school.com.cn">This is a link</a>

在 href 属性中指定链接的地址。

 

 点击这个link 不是新建一个浏览器窗口，而是在本窗口打开网址

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。

（四）图像<img>

<img>没有结束标签，是单独的。

<img src="w3school.jpg" width="104" height="142" />

属性src 指 "source"。

（五）注释与水平线

 （1）注释

<!-- 在此处写注释 -->

将注释插入 HTML 代码中可以提高其可读性。浏览器会忽略注释，也不会显示它们。开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

在sublime 中，注释以及注释的取消都是快捷键ctrl+/ 

 

（2）水平线

<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。水平线一直从网页的左端一直跨越到右端。

 

 ----- 先做一个小结

HTML 标签可以拥有属性。属性总是在 HTML 元素的开始标签中规定。例如HTML 链接由 <a> 标签定义，链接的地址在 href 属性中指定。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性值都在"" 双引号内。不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

（六）列表：无序ul ， 有序ol , 列表项li

1. 无序列表ul，常用于导航栏

示例

 

 2. 有序列表 ol 

有序列表常见的有排行榜，热搜排名等

 

 示例

 会自动出现123编码，样式在CSS中可以设置。

（七）表格 table tr td

每一行需要用tr标签，每一个单元格需要用td标签。

 

 

 

 还有表头标签<th>， 字体会自动加粗。

（八）区域div

div 常用于一个栏目

 示例

  区域内部的所有元素都会居中对齐。

div 标签最大的用处就是结合CSS样式，对每个区域进行单独排版。

**综合示例1

 

 

 

 分为三个栏目div进行，分别放导航栏、图片+文本、注释

 代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李白诗词</title>
</head>
<body>
<div id="container" align="center">
    <div  id ="nav">
        <p>将进酒 | 送友人 | 静夜思</p>        
    </div>
    <hr>
    <div  id="content"> 
        <img src="1.jpg" alt="">
        <h1>将进酒</h1>
        <p> 君不见，黄河之水天上来，奔流到海不复回。 </p> 
        <p> 君不见，高堂明镜悲白发，朝如青丝暮成雪。  </p>
        <p> 人生得意须尽欢，莫使金樽空对月。  </p>
        <p> 天生我材必有用，千金散尽还复来。  </p>
        <p> 烹羊宰牛且为乐，会须一饮三百杯。  </p>
        <p> 岑夫子<sup>1</sup>，丹丘生<sup>2</sup>，将进酒，杯莫停。 </p> 
        <p> 与君歌一曲，请君为我倾耳听。  </p>
        <p> 钟鼓馔玉何足贵，但愿长醉不愿醒。 </p> 
        <p> 古来圣贤皆寂寞，唯有饮者留其名。  </p>
        <p> 陈王昔时宴平乐，斗酒十千恣欢谑。 </p> 
        <p> 主人何为言少钱，径须沽取对君酌。 </p> 
        <p> 五花马,千金裘，呼儿将出换美酒，与尔同销万古愁。  </p>
    </div> 
    <hr> 
    <div  id="exp">
        <p>1.岑夫子：人名</p>
        <p>2.丹丘生：人名</p>
    </div>
</div>   
</body>
</html>

id  属性它的含义就是这个名字是唯一的，上述划分了三个子区域，好处是这样可用CSS设置每个区域的样式。

sub 表示加上标。

第二种方法（只设置一个div）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李白诗词</title>
</head>
<body>
<div id="container" align="center">

    <p>将进酒 | 送友人 | 静夜思</p>        

    <hr>

    <img src="1.jpg" alt="">
    <h1>将进酒</h1>
    <p> 君不见，黄河之水天上来，奔流到海不复回。 </p> 
    <p> 君不见，高堂明镜悲白发，朝如青丝暮成雪。  </p>
    <p> 人生得意须尽欢，莫使金樽空对月。  </p>
    <p> 天生我材必有用，千金散尽还复来。  </p>
    <p> 烹羊宰牛且为乐，会须一饮三百杯。  </p>
    <p> 岑夫子<sup>1</sup>，丹丘生<sup>2</sup>，将进酒，杯莫停。 </p> 
    <p> 与君歌一曲，请君为我倾耳听。  </p>
    <p> 钟鼓馔玉何足贵，但愿长醉不愿醒。 </p> 
    <p> 古来圣贤皆寂寞，唯有饮者留其名。  </p>
    <p> 陈王昔时宴平乐，斗酒十千恣欢谑。 </p> 
    <p> 主人何为言少钱，径须沽取对君酌。 </p> 
    <p> 五花马,千金裘，呼儿将出换美酒，与尔同销万古愁。  </p>
  
    <hr> 
   
    <p>1.岑夫子：人名</p>
    <p>2.丹丘生：人名</p>

</div>   
</body>
</html>

最后的效果也是一样的。

**综合示例2  ---排行榜（涉及到表格、超链接、有序列表）

 代码如下

div>table>tr*2>td

ol>10*li>a[href="#"]

<html>
    <head>
        <title>百度百科</title>
    </head>
    <body>
    <div id="container" align="center">        

        <table border="1" >
            <tr>
              <td>
                <h1>star top10</h1>
               </td>
            </tr>
            <tr><td>
                  <ol>
                    <li><a href="#">bigbang</a></li>
                    <li><a href="#">东方神起</a></li>
                    <li><a href="#">少女时代</a></li>
                    <li><a href="#">super junior</a></li>
                    <li><a href="#">beast</a></li>
                    <li><a href="#">shinee</a></li>
                    <li><a href="#">2NE1</a></li>
                    <li><a href="#">T-ara</a></li>
                    <li><a href="#">f(x)</a></li>
                    <li><a href="#">C.N.Blue</a></li>
                 </ol>
               </td>
            </tr>                                              
        </table>
    </div>
    </body>
</html>

border=1 表示表格的边框。

（九）表单<form>与表单元素 

表单：是一个区域，采集用户信息。

表单元素：输入框，文本框、密码框、按钮、复选、下拉列表等。

 

表单元素有以下几种：input \text \password\submit 等……

form标签，里面放置表单元素。

 form有一个很重要的属性action， 表示获取的数据由哪个页面进行处理，是web系统后端的一个页面。

（1）文本框、密码框 input

 区别在于密码框会** 显示。文本框则普通的明文显示。

一般表单元素都会带有name 属性，就是这个表单元素的名字是什么， name属性怎样使用？当表单的数据提交给后端页面处理的时候，后端处理需要知道这个数据来源于哪个表单元素，需要通过name属性来读取。

（2）按钮

提交按钮、重置按钮

 value是按钮里面的字。

（3）单选、复选框

  checked=“checked”表示这一项被默认被选中。

例子

<form action="">
    性别：
    男 <input type="radio" value="boy" name="gender" checked="checked" />
    女 <input type="radio" value="girl" name="gender" />
    <br />
    爱好：
    <input type="checkbox" value ="1" name="music" checked="checked" /> 音乐
    <input type="checkbox" value ="2" name="sport" /> 体育
    <input type="checkbox" value ="3" name="reading" /> 阅读
</form>

单选框则为radio，最重要的是 单选框的name 属性要相同，这样这一组单选框才会被选择一个选项。

对于复选框用checkbox， name属性可以不同。

 （4）下拉列表框 select ,option

每各选项都用option标签。

例子

 

<form>
    爱好：
    <select>
        <option >看书</option>
        <option selected="selected">旅游</option>
        <option >运动</option>
        <option >购物</option>
    </select>
</form>

 （5）文本框

 <textarea rows="行数" cols="列数">文本<\textarea>


 

<form action="">
    个人简介：<br />
    <textarea cols="50" rows="10">
        在这里输入内容...
    </textarea>
    <br />
    <input type="submit" value="确定" />
    <input type="reset" value="重置"/>
</form>

 

chapter3-- web语义化

em strong ；

dl dt dp

web语义化：让页面具有良好的结构与含义，从而让人和机器都螚快速理解网页内容。有以下优点：

（1）结构清晰，利于团队的开发、维护；

（2）有利于搜索引擎理解。SEO（searching engine optimization） 搜索引擎优化；

（3）容易兼容不同设备（硬件设备）

 

 i 标签没有语义； b 没有语义；

标签：web,HTML,标签,将进酒,元素,语义,表单,html,属性
来源： https://www.cnblogs.com/xuying-fall/p/12098588.html