HTML学习笔记

HTML

文本标题标记：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标记：

<p>香港回顾25周年</p>

特殊符号：

&lt;  <
&gt;  >
&yen; ￥
&copy;  © 

其他标记：

<u>下划线</u>
<b>加粗</b>
<i>倾斜</i>
<strong>强调加粗</strong>
<em>倾斜</em>

单标签：

<br />  换行
<hr />  分割线

超链接：

<!-- 超链接 
    href  跳转的地址  如果是网上地址一定要加 http
    target    _blank 在新窗口打开   _self  (默认不写就是默认) 在当前窗口打开
-->
<a href="http://www.baidu.com" target="_self">百度</a>

有序列表：

<ol>
      <li>列表内容 1</li>
      <li>列表内容 2</li>
      <li></li>
</ol>

无序列表：

<ul>
      <li>无序列表内容</li>
      <li>无序列表内容</li>
      <li></li>
</ul>

自定义列表：

<dl>
      <dt>中国的城市</dt>
      <dd>北京</dd>
      <dd>上海</dd>
      <dd>广州</dd>
      <dt>美国的城市</dt>
      <dd>纽约</dd>
      <dd>华盛顿</dd>
</dl>

图片标记：

<!-- 
      图片标记
      src  图片的路径
      width   设置图片宽度
      height  设置图片高度
      title  鼠标放到图片上时显示标题    利于搜索引擎优化
      alt  网速慢，或者图片不小心删除，影响用户体验  加载慢，或者图片不存在，使用alt属性值来提示

      特点：多个占一行，可以设置宽高
-->
<img
      src="./img/bd2.png"
      width="200px"
      title="总统"
      alt="这是一张总统照片"
/>

其他重要标记：

<div>div标记</div>
<span>span标记</span>

表格：

<!-- table 
    属性： width：宽度    
    border边框   
    cellspacing单元格和单元格之间的距离
    cellpadding 内容和单元格之间的距离
-->
<table width="500" border="1px" cellspacing="0" cellpadding="20">
  <caption>
    <h1>表格标题</h1>
  </caption>
  <!-- tr  行
   height 高度
   align 内容水平对齐方式  居中center  居左 left 居右right
   valign 垂直方向对齐方式  middle top bottom
  -->
  <tr height="60px" align="right" valign="bottom">
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td width="100" height="80" align="right" valign="bottom">xx</td>
    <td>xx</td>
  </tr>
</table>

表格进阶：

<!-- 
     th和td代表的都是单元格   th 多了样式  居中 加粗
     thead  表格字段名
     tbody  表格中的每一条数据
-->
<table border="1" width="300" cellspacing="0">
  <caption>
    表格标题
  </caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>语文</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>欧阳小灰</td>
      <td>男</td>
      <td>90</td>
      <td>100</td>
    </tr>
    <tr>
      <td>欧阳小灰</td>
      <td>男</td>
      <td>90</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

表单：

<div>文本框: <input type="text" name="name" value="123" disabled /></div>

    <div>密码框:<input type="password" name="pass" value="123" disabled /></div>

    <div>
      性别-单选框:
      <input type="radio" name="sex" value="男" />男
      <input type="radio" name="sex" value="女" checked />女
    </div>
    <div>
      下拉列表
      <select name="city">
        <option value="北京">北京</option>
        <option value="上海" selected>上海</option>
        <option value="广州">广州</option>
      </select>
    </div>
    <div>
      复选框
      <input type="checkbox" name="hobby" value="吃" checked />吃
      <input type="checkbox" name="hobby" value="喝" checked />喝
      <input type="checkbox" name="hobby" value="玩" checked />玩
      <input type="checkbox" name="hobby" value="乐" checked />乐
    </div>

    <div>
      文本域
      <textarea name="ly" rows="5" cols="4">留言</textarea>
    </div>
    <!-- 
  disabled  禁用
 -->
    <div>
      普通按钮
      <input type="button" value="提交" name="anniu" disabled />
      <button type="button" disabled>按钮</button>
    </div>
    <div>
      提交按钮
      <input type="submit" value="提交" name="tj" />
      <button type="submit" disabled>按钮</button>
    </div>
    <!-- 普通按钮和提交按钮 外观上没有区别  功能上有区别，js中讲 -->

HTML5：

新增语义化标签：

<header>头部</header>

<footer>底部</footer>

<main>主体</main>

<nav>导航连接</nav>

<section>内容区块</section>

<article>内容</article>

视频标签：

controls 可控制

autoplay 自动播放

type 视频格式

<video controls width="400" height="400" autoplay>
    <source type="video/mp4" src="./videos/c.mp4" />
</video>

音频标签：

<audio controls>
    <source src="./music/MC高迪 - 一人我饮酒醉.mp3" type="audio/mp3" />
</audio>

datalist：

datalist 提供一个事先定义好的列表 通过id和input关联

<p>浏览器版本<input list="words" /></p>

<datalist id="words">
    <option value="Firefox">Firefox</option>
    <option value="opera">opera</option>
    <option value="sogou">sogou</option>
    <option value="safari">safari</option>
</datalist>

新增表单元素：

邮箱输入文本框：

<input type="email" id="email" name="a" />

url地址文本框：

<input type="url" name="b" />

数字文本框：

<input type="number" name="n" />

范围文本框：

input type="range" value="25" min="0" max="100" step="5" />

日期文本框：

<input type="date" />
<input type="month" />
<input type="week" />
<input type="datetime" />

提交按钮：

<input type="submit" />

文本提交form：

<form>
    <!-- 专门用来输入email地址的文本框，如果内容不是email地址 就不允许提交 -->
    邮箱
    <input type="email" id="email" name="a" />
    <!-- 专门用来输入url地址的文本框 如果内容不是url地址格式 就不允许提交 -->
    地址
    <input type="url" name="b" />
    <!-- 专门用来输入数字的文本框  提交时会检查内容是否为数字-->
    <input type="number" name="n" />
    <!-- 只允许输入一段范围内数值的文本框  value当前的值   min最小值  max最大值 step每次拖动的步幅 -->
    <input type="range" value="25" min="0" max="100" step="5" />

    <input type="date" />
    <input type="month" />
    <input type="week" />
    <input type="datetime" />
    <!-- 提交按钮 -->
    <input type="submit" />
</form>

label标签：

label配合input一起使用

label的for属性和input的id属性值是一致的

使用label点击文本，浏览器就会自动将焦点转到和该标签相关联的控件上

<label for="email">
    邮箱
    <input type="email" id="email" name="a" />
</label>

文本框其他属性：

placeholder 文本框处于未输入状态时 文本框中显示的提示信息

autofocus 自动获取焦点 一个页面只能有一个

required 必填项

<input
        type="text"
        required
        name="user"
        autofocus
        placeholder="请输入用户名"
      />