HTML（2017.5.8）学习笔记

2017-05-08 本文已影响0人张博一

元素——基本的构造区块

HTML由不同元素的集合组成。元素定义了它们所包含内容的语义。元素包含了两个相匹配的元素标签（tag）之中所有的内容，当然也包含了标签本身。标签的完整列表
大部分的元素都支持元素嵌套，构成了一个层次结构。一个简单的完整的网页结构例子如下所示：

<html>
  <head>
    <title>一个小型web页面</title>
  </head>
  <body>
    <p>你在学习HTML的起始页面</p>
  </body>
</html>

<p>这是段落中的文本。</p>```
上述例子中有一个起始标签（start tag）和一个结束标签（end tag）。结束标签与起始标签在内容上是一样的，但结束标签会在小于符号（<）后多一个整斜线/。 大多数 HTML 元素由一个起始标签和一个结束标签标识。起始标签和结束标签应成对出现，也就是说在一个起始标签之后应有其对应的结束标签。  由两个标签（起始标签和结束标签）构成的元素而言，缺少其中之一，这个元素都可能会被认为是无效的。
#属性
开始标签可能包含一些信息，这些信息叫做元素的特性，包括两部分:
- 特姓名
- 特性值

一些元素可以只有特性名没有特性值。它们的特性名类似“是否”，“有或没有”，所以可以省略特性值，所以下面三种写法都是一样的意思:

<input required>```

特性值如果有包含空格就要用引号，单双引号都可以。如果特性值是单个词就可以不用引号，但为了避免出错和易于识别一般会加上引号

命名字符参考

命名字符参考 (一般被称作实体) 用于表示在HTML中具有特定含义的字符. 举例说，HTML将“>”和“<”符号理解为标签分隔符。所以，当你想在文本中用">"符号表达“大于”的含义时，你可以使用命名字符参考来作为替代。以下例举了四个非常重要的常用实体：

> 表示大于符号">" (>)
< 表示小于符号"<" (<)
& 表示和符号"and"(&)
" 表示引用符号" (")```
[其他命名字符参考](https://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html)
#文档类型和注释
除标签，文本内容和实体外，一个HTML文档一定需要在**第一行做出文档类型声明(doctype declaration)**。在现代HTML中，这句声明书写如下：

<!DOCTYPE html>```
注释格式如下：

<!-- 这是评论文本 -->```
#一个完整且精简的文档

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A tiny document</title>
</head>
<body>
<h1>Main heading in my document</h1>

<p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>```
今天我做的例子代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>A tiny document</title>
  </head>
  <body>
    <h1>网站一级标题</h1>
    <ul>
      <li> <a href="http://www.w3school.com.cn/">导航链接一</a></li>
      <li> <a href="http://www.w3school.com.cn/">导航链接二</a></li>
      <li> <a href="http://www.w3school.com.cn/">导航链接三</a></li>
      <li> <a href="http://www.w3school.com.cn/">导航链接四</a></li>
    </ul>
    <h2>文章一级标题</h2>
    <h2>文章二级标题</h2>
    <p>文章作者 文章发表时间</p>
    <p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
    <p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
    <p>这是一个很长的段落 这是一个很长的段落 <a href="http://www.baidu.com/">这里有一个链接链接到www.baidu.com</a><b> 这是一个加粗</b>这是一个很长的段落 这是一个很长的段落<br /></p>
    ![](1.jpg)
    <p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
    <p>这是一个很长的段落 这是一个很长的段落 <b>这里有个粗体字</b> 这是一个很长的段落 这是一个很长的段落 <a href="www.baidu.com/">这里有一个链接链接到www.baidu.com</a>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
    <h2>另一篇文章一级标题</h2>
    <h2>文章二级标题</h2>
    <p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
    <p>这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 这是一个很长的段落 换行了<br /></p>
    <p>这是一个很长的段落 这是一个很长的段落 <a href="http://www.baidu.com/">这里有一个链接链接到www.baidu.com</a>这是一个很长的段落 这是一个很长的段落<br /></p>
    <img src ="3.jpg" width="300" height="200"> 
    <ul>
      <li> 列表一</li>
      <li> 列表二</li>
      <li> 列表三</li>
    </ul>
    <h2>图片</h2>
    <p>好看的图片</p> 
    <img src ="3.jpg" width="300" height="200"> 

    <p>好看的图片</p>
    <img src ="3.jpg" width="300" height="200"> 

    <p>好看的图片</p>
    <img src ="3.jpg" width="300" height="200">
    <h2>最后一篇文章一级标题</h2>
    <h3>
      文章二级标题
    </h3>
    <p>
      文章作者 文章发表时间
    </p>
    <ol>
      <li>排名一</li>
      <li>排名二</li>
      <li>排名三</li>
    </ol>
    <table border="1">
      <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
      </tr>
      <tr>
        <td>表内容单元格</td>
        <td>表内容单元格</td>
        <td> <a href="www.baidu.com/">操作</a></td>
      </tr>
      <tr>
        <td>表内容单元格</td>
        <td>表内容单元格</td>
        <td> <a href="www.baidu.com/">操作</a></td>
      </tr>
      <tr>
        <td>表内容单元格</td>
        <td>表内容单元格</td>
        <td> <a href="www.baidu.com/">操作</a></td>
      </tr>
      <tr>
        <td>表内容单元格</td>
        <td>表内容单元格</td>
        <td> <a href="www.baidu.com/">操作</a></td>
      </tr>
      <tr>
        <td>总计</td>
        <td colspan="2">100</td>
      </tr>
    </table>
    <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
    <h2>
      侧栏注册窗口标题
    </h2>
    <p>请输入邮箱地址：<input type="text" name="邮箱地址" value="这是一个文本输入框"></p>
    <p>请输入密码：<input type="password" name="密码输入框" value="这是一个文本输入框">请重复输入密码：<input type="password" name="mima" value="这是一个文本输入框"></p>
    <h3>
      密码请为6-16位英文数字
    </h3>
    <form action="action_page.php">
    性别：
      <input type="radio" name="sex" value="女" style="display:inline" checked >女
      <input type="radio" name="sex" value="男" style="display:inline">男
    城市：
      <select name="城市">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="重庆">重庆</option>
        <option value="杭州">杭州</option>
      </select>
    爱好：
      <input type="checkbox" name="艺术" value="艺术" style="display:inline">艺术
      <input type="checkbox" name="运动" value="运动" style="display:inline">运动
      <input type="checkbox" name="科学" value="科学" style="display:inline">科学
    个人描述：
      <textarea name="a" style="width:200px;height:30px;">这是一个多行输入框请在这里输入内容</textarea>
      <input type="submit">
    </form>
  
  </body>
</html>

展示效果：https://thimble.mozilla.org/zh-CN/user/zhang-boyi-911/955634

HTML（2017.5.8）学习笔记

元素——基本的构造区块

标签

命名字符参考

猜你喜欢

热点阅读