2.14 笔记第一章 HTML

SmartWindowsComen

已于 2023-02-15 23:55:40 修改

阅读量43

点赞数

分类专栏：初学者笔记 HTML 文章标签： html xhtml 前端 Powered by 金山文档

于 2023-02-15 00:13:03 首次发布

本文链接：https://blog.csdn.net/weixin_44811380/article/details/129035569

版权

初学者笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

第一章 HTML

客户端技术

HTML

超文本标记语言【Hyper text markup language】,基于网络协议HTTP【超文本传输协议】，用标记来描述网站的客户端语言。
版本：【W3C组织技术联盟】
HTML4.01 PC端
HTML5.0 移动端
XHTML

1.1 HTML的语法构成

标记【标签】：网页一个元素，内容

属性：修饰标记特性的

<!--  注释   -->
<!--  双标记   -->
<标记名 属性="值" 属性="值">
    内容
</标记名>

<!--  单标记   -->
<标记名 属性="值" 属性="值" />

注意：
不区分大小写，小写推荐
不区分单双引号，嵌套的情况：外双内单外单内双
HTML文件的拓展名 .html .htm

1.2 HTML开发调试工具

开发：
     Hbuilder  Idea  VSCode  sublime  webstorm  
调试：F12
    浏览器
    NN浏览器 网景公司
    IE浏览器 微软公司
    
    欧鹏 Opera    -o-
    火狐 firefox  -moz-
    谷歌 chrome  -webkit-
    微软 IE   -ms-
    苹果 Safari
    
360 , QQ , 2345 , 搜狗， 猎豹 ，遨游 ....

1.3 HTML 结构

<!DOCTYPE html>  <!-- 头文件，指名版本 -->
 <!-- 根 -->
<html>
    <head>
         <!-- 设置编码 -->
        <meta charset="utf-8" />
        <title></title>
    </head>
     <!-- 内容 -->
    <body>
        
    </body>
</html>

1.4 HTML 基本标记

标记名	含义	双/单	属性
<h1></h1>... <h6></h6>	标题，数字越大，标题越小	双	align="center"
<hr>	水平线	单	align="center" color=""颜色size="" 高度width=”“ 宽度
	换行	单
<p></p>	段落	双	align="center"
<img>	图像	单	src=""路径 alt="" 显示不出的替代文字
<a></a>	链接，跳转	双	href="" 路径
<ul> <li></li>.... </ul>	无序列表	双	type=”“ disc circle square
<ol> <li></li>.... </ol>	有序列表	双	type=”“
<span></span>	文字标签	双
<div></div>	块标记【布局网站】	双

链接的跳转：

页外跳转跳转后到其他页面

页内跳转长网页，不跳出页面外部，当前页面跳转【锚链接】

1. 定义锚点 <a name="锚点名"></a>
2. 链接找到锚点  <a href="#锚点名"></a>

<a href="#music">音乐</a>
<a href="#sport">体育</a>
<a href="#money">财经</a>
<h3><a name="music">音乐</a></h3>...

<ul type="square">
            <li>满江红</li>
            <li>流浪地球</li>
            <li>深海</li>
            <li>举起手来</li>
</ul>

特殊的字体标记：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <b>
            以下内容重点强调
        </b>
        <i>    
            老师的心情和<b>天气</b>有关
        </i>
         
        
        <u>
            今日特惠价
        </u>
        ￥99，无需 <s>￥999</s>
        
        H<sub>2</sub>o 是生命之源!
        
        <br>
        2<sup>3</sup>=8
    </body>
</html>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            span{
                font-size: 18px;
                color: pink;
            }
            
            div{
                width: 1200px;
                height: 400px;
                background-color: pink;
                /* 居中 */
                margin: auto;
            }
        </style>
    </head>
    <body>
        
        <!-- <span>老师的心情和<b>天气</b>有关</span> -->
        
        <div>    
            <h3>关于我们</h3>
        </div>
        
    </body>
</html>

1.5 HTML 表格标记

表格用于网站显示数据。

标记名	含义	双/单	属性
<table></table>	表格	双	width="600px" height="400" border="1" align="center" cellspacing="0" 单元格间距cellpadding="20" 单元格内容间距
<tr></tr>	行		height="" align="" valign="" 垂直位置
<td></td>	列		width="" align="" valign="" 垂直位置rowspan="数字" 合并行 colspan="" 合并列
<th></th>	标题

表格示例：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- table>tr*3>td*2 tab -->
        <!-- 表格 -->
        <table width="600px" height="400" border="1" align="center" cellspacing="0" cellpadding="0">
            <!-- 第一行 -->
            <tr height="50" >
                <!-- 第一列 -->
                <th>姓名</th>
                <!-- 第二列 -->
                <th>年龄</th>
            </tr>
            <!-- 第二行 -->
            <tr align="center" valign="middle">
                <td>张三</td>
                <td rowspan="2">15</td>
            </tr>
            <!-- 第三行 -->
            <tr align="center" valign="middle">
                <td width="100">李四</td>
                
            </tr>
            <tr>
                <td colspan="2">
                    欢迎记录学生年龄
                </td>
                
            </tr>
        </table>
    </body>
</html>

1.6 HTML 表单标记

表单用于在网站上收集用户的数据信息的元素。如：注册，登录，提交购买商品

表单标记：

标记名

含义

双/单

属性

表单

双

action="" 表单提交到服务器的路径

method="" 表单提交方式

post 密文

get 明文默认

getid="" 唯一

name="" 名字可重复

表单内容标记：【HTML4.0】

文本输入框

标记名	含义	双/单	属性
<input type="text"/>	文本框	单	maxlength="" 最大长度 value="" 文本框的值 placeholder=“提示文字” readonly="readonly" id=""
<input type="password"/>	密码框		同上
<input type="file">	上传框

选择框

标记名	含义	双/单	属性
<input type="radio"/>	单选按钮多选1	单	name="" 相同 namechecked 默认选中 value="" 值
<input type="checkbox"/>	复选框，多个		同上
<select><option>...</option></select>	下拉菜单		value="" selected="" 默认选中
<optgroup label="辽宁省"></optgroup>	下拉菜单分组		label=""

<form action="" method="get">
            
            <label for="">账号:</label>
            <input type="text" maxlength="6" value="" placeholder="请输入账户" id="username">
            <!-- <button onclick="alert(username.value)">获取</button> -->
            <br><br>
            <label for="">密码:</label>
            <input type="password" maxlength="6" value="" placeholder="请输入密码">
            
            <br><br>
            <label for="">性别:</label>
            <input type="radio" name="gender" checked id="r1"> <label for="r1">男</label>
            <input type="radio" name="gender" id="r2"> <label for="r2">女</label>
            <br><br>
            <label for="">爱好:</label>
            <input type="checkbox" name="hobby"> 唱
            <input type="checkbox" name="hobby"> 跳
            <input type="checkbox" name="hobby"> RAP
            <input type="checkbox" name="hobby"> 篮球 
            
            
            <br><br>
            <label for="">上传文件:</label>
            <input type="file">
            
            <!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
</form>

按钮：

标记名	含义	双/单	属性
<input type="button">	普通按钮	单	value=“” 按钮文字
<input type="submit"/>	提交按钮，自动提交表单		同上
<input type="image" src=""/>	图片作为提交按钮

<br><br>
            <label for="">城市:</label>
            
            <select name="" id="">
                <optgroup label="辽宁省">
                    <option value="">大连</option>
                    <option value="" selected>沈阳</option>
                    <option value="">本溪</option>
                    <option value="">铁岭</option>
                </optgroup>
                
                <optgroup label="江苏省">
                    <option value="">南京</option>
                    <option value="">苏州</option>
                </optgroup>
            </select>
            
            
            <br><br>
            <label for="">上传文件:</label>
            <input type="file">
            
            <!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
            
            <!-- <input type="submit" value="登录"> -->
            
            <input type="image" src="img/5.gif">

表单内容标记：【HTML5.0】

标记名	含义	双/单	属性
<input type="date" value="2023-02-15">	日期	单
<input type="time">	时间
<input type="number" value="1" max="6" min="1" step="2">	数字
<input type="color">	颜色
<input type="range">	滑动
<input type="tel" required pattern="\d{11}">	手机
<input type="text" list="l"/> <datalist id="l"> <option value="DL">大连</option> <option value="DD">丹东</option> <option value="BJ">北京</option> <option value="BX">本溪</option> </datalist>	列表提示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="">
            <input type="date" value="2023-02-15">
            <input type="time">
            <input type="number" value="1" max="6" min="1" step="2">
            <input type="color">
            <input type="range">
            
            <input type="tel" required pattern="\d{11}">
            <input type="email"/>
            
            
            <input type="search">
            
            <input type="text" list="l"/>
            <datalist id="l">
                <option value="DL">大连</option>
                <option value="DD">丹东</option>
                <option value="BJ">北京</option>
                <option value="BX">本溪</option>                
            </datalist>
            
            
            
            <input type="submit">
        </form>
    </body>
</html>

1.7 补充知识点

方位词：
    水平方向 ： left  center  right
    垂直方向 ： top  middle  bottom 
    
尺寸：
    px 像素
    % 百分比
    vw 
    
颜色：
    颜色名 pink grey
    十六进制 #FFFFFF   红 绿 蓝
    rgb(200,200,200)

1.8 元素总结

元素分成三类：
    块元素【容器】
        1. 独占一行
        2. 宽度默认100%
        3. 改变宽高，内外补白
    代表： <p></p> <h1~h6></h1~h6> <hr>  <table></table> <form></form> <div></div>  <ol></ol> <ul></ul>
    

    内联元素【文字】
        1. 元素挨着显示
        2. 宽度就是自己宽度
        3. 不能改变宽高

    代表：<a></a>  <b></b> <i></i> <u></u> <label></label> <span></span>
    
    内联块元素【图片 input】
        1. 元素挨着显示
        2. 宽度就是自己宽度
        3. 能改变宽高

    代表： <input> <img> <video></video>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #father{
                width: 920px;
                margin: auto;
            }
            #father div{
                width: 300px;
                height: 300px;
                
                /* 块转化为内联块 */
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div style="background-color: pink;"></div>
            <div style="background-color: lightblue;"></div>
            <div style="background-color: lightgoldenrodyellow;"></div>
        </div>
        
    </body>
</html>