Web前端（第一章）HTML学习笔记

HTML

HyperTextMarkupLanguage:超文本标记语言
纯文本: 指只包含文本内容不包含其它任何信息
超文本: 指不仅仅是纯文本,还包括字体效果和多媒体信息(音频/视频/图片)
ML标记语言: 指以一对尖括号表示元素的语言格式
意义：学习HTML实际上就是学习有哪些HTML标签, 以及这些标签的使用方式
HTML常见标签
一、常见文本相关标签
1.内容标题h1-h6
显示特点: 数值越小字体越大, 自带加粗和上下间距,独占一行

• 段落标签p
  显示特点: 独占一行 自带上下间距
• 文本相关
  加粗b
  斜体i
  小字small
  下划线u
  代码样例：
  内容标题代码样例：

<!--常见文本相关标签-->
<!--内容标题-->
<!--显示特点:数值越大，字体越小， 自带加粗，上下间距,独占一行-->
<!--align 对齐方式  center居中 right右对齐-->
<h>文本标签</h>
<h1 align = "center">文本标签</h1> 
<h1 align = "right">文本标签</h1> 
<h1>文本标签</h1> 
<h2>文本标签</h2> 
<h3>文本标签</h3> 
<h4>文本标签</h4> 
<h5>文本标签</h5> 
<h6>文本标签</h6>

段落标签代码样例：

<!-- 显示特点: 独占一行 自带上下间距 -->
<!--段落标签-->
<!--align 对齐方式  center居中 right右对齐-->
<p align = "center">hello,world,html</p>
<p align = "right">hello,world,html</p>
<p>hello,world,html</p>

文本字体相关效果代码样例

<!--字体相关-->
<!--在html中如果需要换行需要使用br标签 -->
<b>字体加粗</b><br>
<i>字体斜体</i><br>
<small>字体变小</small><br>
<u>下划线</u>

二、列表标签
1.无序列表 ul 和li
2.有序列表 ol和li type类型 start起始值 reversed降序

• 列表嵌套 有序和无序可以任意无限嵌套
  代码样例：
  无序列表样例代码：

<!--type="circle" 空心圆，去掉这个则是实心圆-->
<ul type = " ">
    <li>Java</li>
    <li>C</li>
    <li>C++</li>
    <li>go</li>
    <li>python</li>
</ul>

有序列表样例代码

<!--i罗马数字排序,1阿拉伯数字排序,a安装字母排序-->
<!--默认为阿拉伯数字排序-->
<ol type="a">
    <li>Java基础语法</li>
    <li>面向对象</li>
    <li>Api</li>
    <li>线程</li>
</ol>

有序和无序标签的互相嵌套代码样例：

<ul>
    <li>凉菜
        <ol>
            <li>拍黄瓜</li>
            <li>花毛一体</li>
            <li>东北大拉皮</li>
        </ol>
    </li>
    <li>炒菜
        <ol>
            <li>木须肉</li>
            <li>宫保鸡丁</li>
            <li>溜肉段</li>
        </ol>
    </li>
</ul>

三、图片标签img
图片标签支持的图片格式：jpg、png、gif格式
引用图片的路径（两种）
相对路径（对于存储用于文件夹来说）：

• 图片与页面同级：直接写图片名.图片格式
• 图片在页面的上级：…/图片名.图片格式
• 图片在页面的下级：文件夹名/图片名.图片格式

绝对路径:
访问站外资源时使用，好处是能节省自己网站资源，但是有可能会找不到图片（不使用）

alt:图片不能正常显示时显示的文本(效果,访问网页时图片打不开图片位置所在的左下角显示的文本)
title: 鼠标在图片上悬停时显示的文本（效果,当鼠标悬停在图片上时，鼠标旁显示的一串文字）
width/heigh: 两种赋值方式1.像素 2. 上级百分比 如果只设置宽度高度会等比例缩放
图片所放位置

<!--图片和页面同级-->
<img src="1.jpg ">
<!--图片在页面的上级文件夹 -->
<img src="../2.jpg">
<!-- 图片在页面的下级文件夹-->
<img src="image/3.jpg">
<!--绝对路径-->
<!-- 二者区别 相对路径：访问站内资源 绝对路径：访问站外资源-->
<img src="放置你选的图片的链接">
<!-- alt 图片不能显示时显示的文本-->
<img src="6.jpg" alt="此图片无效">
<!-- title 鼠标停在图片上显示的标题-->
<img src="1.jpg " title="小桥流水人家">
<!-- width height 设置图片的宽高 -->
<!-- 如果指给宽度赋值 高度会等比例缩放 width="50%"-->
<img src="1.jpg " width="300" height="300">
<img src="1.jpg " width="50">

四、超链接
href属性类似于图片标签的src属性, 要的是一个资源的路径,可以相对路径也可以绝对路径,指向的
资源如果浏览器支持浏览则直接浏览 , 如果不支持则触发下载
1.a标签包裹文本的话是文本超链接, 如果包裹的是图片则是图片超链接
2.target="_blank" 访问的页面在新选项卡中显示, 默认是从当前选项卡跳转离开
3.页面内部跳转, 超链接如果href写的值是当前页面中某个元素的id ,可以直接跳转到该元素所在的
位置

<!--在一个新的网页中打开 target="_blank" -->
<a target="_blank" id="top" href="www.baidu.com">超链接1</a>
<a href="图片标签.html">超链接2</a>
<a href="1.jpg">超链接3</a>
<!-- 如果指向的文件浏览器不支持查看则自动触发下载-->
<a href="image.rar">超链接4</a>
<!--点击图片自动跳转到链接所占的网页-->
<a href="www.baidu.com">
    <img src="1.jpg" alt="">
</a>
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<a href="#top">回到顶部</a>

五、表格标签
1.相关标签: table tr表示行 td表示列 th表头(加粗并且居中) caption表格标题
2.相关属性: table:border边框 cellspacing单元格间距 cellpadding 单元格距内容的距离
                    td:rowspan跨行 colspan跨列
表格标签代码样例：

<!-- border边框 cellspacing单元格间距 cellpadding单元格内容的距离-->
<table border="1" cellspacing="10" cellpadding="20">
    <tr><!-- tr代表行 td代表列 -->
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>

    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

    <tr>
        <td colspan="2" align="center">3-1</td>
        <td rowspan="2" >3-2</td>
    </tr>

    <tr>
        <td colspan="2" align="center">4-1</td>

    </tr>
</table>

<table border="1" align="center" cellpadding="20" cellspacing="10">
    <caption>订单列表</caption>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>价格</th>
    </tr>

    <tr>
        <td>1</td>
        <td>鼠标</td>
        <td>20</td>
    </tr>

    <tr>
        <td>2</td>
        <td>键盘</td>
        <td>80</td>
    </tr>

    <tr>
        <td>3</td>
        <td>U盘</td>
        <td>50</td>
    </tr>

    <tr>
        <td>总价</td>
        <td colspan="2">150元</td>
    </tr>
</table>

表格标签代码效果展示

六、from表单
1.表单的作用: 用户获取用户输入的各种信息 ,并将信息到服务器
2.学习表单主要学习的就是表单中的各种控件,包括: 文本框,密码框,单选,多选,下拉选等
文本框：

用户名:<input type="text" name="username" readonly="readonly"
           value="tom" placeholder="请输入您的用户名" maxlength="5">

密码框：

<input type="password" name="password" placeholder="请输入密码">

单选：

性别: <input type="radio" name="gender" value="m" id="r1">
<label for="r1">男</label>

多选：

爱好: <input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" value="hj">喝酒
<input type="checkbox" name="hobby" checked="checked" value="wz">烫头

日期：

生日: <input type="date" name="birthday">

文件:

靓照: <input type="file" name="pic">

下拉选项:

所在城市:
<select name="city">
<option value="bj">北京</option>
<!--selected默认选中-->
<option selected="selected" value="sh">上海</option>
<option value="gz">广州</option>
</select>

文本域:

自我介绍: <textarea name="intro" cols="30"
rows="3" placeholder="说点儿什么..."></textarea> <br>

各种按钮；

<input type="submit" value="注册">
<!--重置按钮-->
<input type="reset">
<!--自定义按钮-->
<input type="button" value="自定义按钮1">
<button>自定义按钮2</button>

七、特殊字符(实体引用)
空格: 在html中如果连续写多个空格,只能识别一个空格,这种现象称为空格折叠现象
多种空格 & n b s p;（中间没有空格，只是为了躲避空格，因为这个在博客里也是空格的意义）
小于号和大于号

小于号: <
大于号: >

八、分区标签
1.作用: 将多个有相关性的标签放到一个分区标签中, 便于统一管理
分区标签默认没有显示效果,可以理解成是一个容器
2.常见的分区标签:
div: 独占一行
span: 共占一行
3.html5的标准中新增一些分区标签: header头/article正文/section区域/nav导航/footer脚 这些
标签的作用和div一样都是独占一行 , 为什么要使用这些标签? 可以提高代码的可读性

<div>头部</div>
<div>体部</div>
<div>脚部</div>
使用新增分区标签:
<header>头</header>
<article>体</article>或<section>体</section>
<footer>脚</footer>