html

用户1812852771267
135 阅读9分钟

html

初识html

一、基本概念

1、网站和网页

1、网站有N个网页组成 2、网页中包含:文字，图片，视频，音频，链接，程序.. 3、网页的内容由HTML技术实现 4、网页的后缀通常都是.html

2、浏览器和渲染引擎

1、常见的浏览器:谷歌，火狐，IE, Safari, 欧朋 2、不同的浏览器有不同的内核(渲染引擎)

3、网页三层结构

1、结构层:使用HTML技术实现，说白了，就是给网页提供内容 2、样式层:给网页提供样式(布局，美化) 3、交互层:使用JS实现，JS是前端程序员最最最最需要掌握的技术

4、开发工具。

1、推荐使用Vs Code工具，好处:小巧，插件多 2、快捷键 1、shift + alt +向下箭头=>复制上一行 2、tab =>向后移动代码 3、shift + tab =>向前移动代码 4、! + tab => html基本骨架!是英文的! 5、div.wraper + tab =>生成一个带名字的div 6、鼠标中键+向下拽=>同时选中多行 7、键盘上的del键=>删除文件 8、F2 =>重命名 9、shift + alt + f=>格式化代码 10、快捷键日ctrl + f =>查找内容并替换内容

5、标签，属性，元素

1、标签：所谓的标签就是<>里加上字母。 标签可以分为：男标签（块级标签）、女标签（行内标签）、人妖标签（行内块标签）。 还可以分为：单标签


、双标签

。 2、标签间的关系： 父子关系 就是所谓的包含关系。 兄弟关系 就是并列关系。 后代关系 是一种特殊的包含关系。 例子：其中p标签是div的后代，span标签也是div的后代。

            <div>
                <p>
                    <span></span>
                    <span></span>
                </p>
            </div>

3、属性： 属性的形式是xxxx="abc" 其中xxxx代表属性名 abc代表属性值 。 属性写在开始标签内 一个标签中可以又很多属性。 属性也分为两种：共有属性（class、id、title、style）和特有属性。 4、元素： 元素=标签+属性+标签内包裹的内容。

2、HTML的基本骨架

> 文档声明
        <!DOCTYPE html> 是HTML5的文档声明
        告诉浏览器，以什么样的标准来解析我们写的代码
> html元素
        是一个网页的根元素，一个网页只有这一个
> lang属性:
    指定网页的语言zh-CN表示中文 en表示英文
> head元素
    head表示网页的头部:基本上对对网页的设置，都会在head实现
    title属性:指定网页的标题的
    meta属性:charset= "utf-8"如果不指定，会出现乱码  
> body元素:网页的主要内容都是写在body中的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<body>

</body>

</html>

3、常用标签

<p> 段落标签
<h系列标签> 标题标签
<br> 换行标签
<img> 图片标签

1、h系列标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不错</title>
</head>
<body>
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
</body>
</html>

h系列标签都是男标签 都独占一行
h系列标签表示标题标签，常用于网页的大标题和文段的小标题中
h1到h6标签字体大小逐渐变小
都具有加粗的效果

2、p标签和br标签

p标签是段落标签 他是一个双标签也是一个男标签
p标签再给文字分段的时候两段中间具有较大的行高

br标签是个单标签 就是具有换行的作用

事例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不错</title>
</head>
<body>
    <p>香港郵政昨日公布2022年7月至12月期間發行的6套特別郵票。<br> 2022年為香港特別行政區成立25周年，隨着香港國安法及完善選舉制度的落實，「一國兩制」得以行穩致遠。解放軍駐港部隊自進駐香港以來，一直堅決貫徹「一國兩制」方針和香港特別行政區基本法、《中華人民共和國香港特別行政區駐軍法》及香港國安法，維護國家主權、安全、發展利益，是維護香港繁榮穩定的重要基石。</p>
    <p>今年7月率先發行「香港特別行政區成立二十五周年」紀念郵票及「中國人民解放軍進駐香港二十五周年」紀念郵票。為紀念香港特別行政區成立25周年及中國人民解放軍進駐香港25周年，香港郵政特別發行紀念郵品展現香港的繁榮發展。</p>
</body>
</html>

3、文本格式化

加粗： 倾斜： 删除线： 下划线： 

    <b>aaaaa</b> <br>
    <strong>aaaaa</strong><br>
    <i>aaaaa</i><br>
    <em>aaaaa</em><br>
    <s>aaaaa</s><br>
    <del>aaaaa</del><br>
    <u>aaaaa</u><br>
    <ins>aaaaa</ins><br>

4、img图片标签 路径

img标签可以将电脑上的图片添加到网页中，也可以直接从别的网页中盗取

img标签中有很多特有属性
src=" "  表示图片的路径，既可以是电脑上的路径 也可以直接从别的网页中复制图片路径
alt=" "  表示当图片显示不出来时提示的文字
title=" "  表示当你鼠标放在图片上时提示的文字

路径有绝对路径和相对路径 
    相对路径就是从文件自身出发寻求目标路径
    绝对路径就是文件本身在电脑的位置 例如：C盘/a文件夹/b文件

    寻找相对路径时  ./代表同级目录 ../代表上一级目录

        <img src="../5.31/练习-01/冬.png" alt="你的图片炸了">
        <img src="../5.31/练习-01/冬.png" title="这是一张图片">
        <img src="../5.31/练习-01/冬.png" alt="你的图片炸了" title="这是一张图片">

5、链接标签和锚点链接

a标签是双标签 同时是个女标签
a标签的属性
    href属性：是跳转路径属性 当点击a标签的内容后就会跳转到href属性内的链接
              一般没有链接或者不确定时用#代替
    title属性：当鼠标放到上边时显示的文字
    target属性：有两个属性值_self _blank 一般默认值位_self

锚点就是利用a标签和h标签实现页面内的跳转
给h标签一个id  然后给a标签一个herf=id值
当点击a标签时会跳转到h标签的位置

    <a href="https://www.baidu.com/" target="_self">11</a>
    <a href="https://www.baidu.com/" target="_blank">12</a>

        <a href="#jiben">基本信息</a>
    <a href="#music">专辑曲目</a>
    <a href="#introduce">歌手介绍</a>
    <hr>
    <h2 id="jiben">基本信息</h2>
    <p>中文名：登峰造极</p>
    <p>英文名：Andy's Best</p>
    <p>歌手：刘德华</p>
    <p>音乐风格：流行</p>
    <p>发行时间：1995年8月</p>
    <p>地区：香港</p>
    <p>语言：普通话</p>
    <h2 id="music">专辑曲目</h2>
    <p>小情人</p>
    <p>忘情水</p>
    <p>真情难收</p>
    <p>宁愿我伤心</p>
    <p>缠绵</p>
    <p>没有人可以像你</p>
    <p>不能没有你</p>
    <p>天意</p>
    <p>一生一次</p>
    <p>我爱你</p>
    <p>你是我的温柔</p>
    <p>峰回路转</p>
    <p>一辈子的错</p>
    <p>友谊历久一样浓</p>
    <p>神魂颠倒</p>
    <h2 id="introduce">歌手介绍</h2>
    <p>刘德华（1961年9月27日），曾用名刘福荣。英文名andy lau，又叫华仔。在华迷中，大家都亲切的叫华仔为老大。90年代香港娱乐圈“四大天王”之一。香港歌影视红星。毕业于香港电视广播有限公司（tvb）。</p>
    <p>80年代在电影“杨门女将”中首次亮相，又在“猎鹰”里首度担正走红。</p>
    <p>曾拍过一百多套电影，并获得香港金像奖最佳男主角，以及得到一百多项流行歌曲奖项。</p>
    <p>他也曾当选世界杰出青年（个人进步及成就）组别以及香港十大杰出青年。</p>
    <p>他在第23届香港电影金像奖取得最佳男主角奖和第41届台湾金马奖最佳男主角。 [1] </p>

6、转义符和注释

    <p>空格 1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1</p>
    <p>空格 1 &emsp;&emsp;&emsp;&emsp;&emsp; 1</p>
    <p>大于号 &gt;</p>
    <p>小于号 &lt;</p>
    <p>圈R &reg;</p>
    <p>圈C &copy;</p>
    <p>取地址符 &amp;</p>
    <p>钱 &yen;</p>
    <p>这是 &trade;</p>
    <p>180&deg;C</p>

7、列表类标签

无序列表 ：<ul><li></li></ul>
    特点：前面带有一个小黑点  独占一行 

    <ul>
         <li>1111111</li>
         <li>1111111</li>
         <li>1111111</li>
         <li>1111111</li>
         <li>1111111</li>
     </ul>

 有序列表 ：<ol><li></li></ol>
    特点：前面带有排名  独占一行 

    <ol>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
    </ol>

有序列表 ：<dl><dt></dt><dd></dd></dl>
    特点：一般dd都是对dt的解释 

        <dl>
        <dt>语文
        <dd>a</dd>
        <dd>b</dd>
        <dd>c</dd>
        </dt>
        <dt>数学
        <dd>a</dd>
        <dd>b</dd>
        <dd>c</dd>
        </dt>
        <dt>英语
        <dd>a</dd>
        <dd>b</dd>
        <dd>c</dd>
        </dt>
    
        </dl>

8、表格类标签

基本形式
    <table>         表格
    <tr>            行        这是表格的头部<thead></thead>
        <th></th>   表头
        <th></th>
        <th></th>
    </tr>
    <tr>                      这是表格的身体<tbody></tbody>
        <td></td>   单元格
        <td></td>
        <td></td>
    </tr>
    <tr>                      这是表格的底部<tfoot></tfoot>
        <td></td>   单元格
        <td></td>
        <td></td>
    </tr>
    </table>

属性设置：
width：宽度
height：高度
cellspacing：单元格之间的距离
cellspadding：单元格于内容之间的距离
border：边框
align：center 边框居中

<body>
    
     <table border="1" cellspacing="0" width="600" height="300" align="center">
        <tr>
            <th>事件</th>
            <th>事件</th>
            <th>事件</th>
            <th>事件</th>
            <th>事件</th>
        </tr>
        <tr>
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
        </tr>
        <tr>
            <td>事件</td>
            <td>事件</td> 
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
        </tr>
        <tr> 
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
        </tr>
     </table>
</body>

9、表格的合并

合并表格可以行合并也可以列合并
colspan：列合并 先找到最左边的单元格输入colspan="" 然后删除合并右边的单元格
rowspan：行合并 先找到最上边的单元格输入colspan="" 然后删除合并下边的单元格


     <table border="1" cellspacing="0" width="600" height="300" align="center">
        <tr>
            <th>事件</th>
            <th>事件</th>
            <th>事件</th>
            <th>事件</th>
            <th>事件</th>
        </tr>
        <tr  align="center">
            <td rowspan="3">事件</td>
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
        </tr>
        <tr  align="center">
            <!-- <td>事件</td> -->
            <td colspan="4">事件</td> 
            <!-- <td>事件</td>
            <td>事件</td>
            <td>事件</td> -->
        </tr>
        <tr  align="center"> 
            <!-- <td>事件</td> -->
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
            <td>事件</td>
        </tr>

10、表单类标签 input 属性 下拉表单

form标签代表表单 用来收集信息 提交给后台
action 属性表示提交的地址

input属性 1.text:文本框 2.password: 密码框
3.radio:单选按钮 需要设置同一个name 4.checkbox:复选框 5.button:普通按钮 6.reset:重置按钮 需要配合form表单才有作用 7.submit:提交按钮 8.image属性src 9.file文件按钮上传图片

下拉框 selected标签代表下拉框 里面包裹的option标签代表下拉内容

 textarea代表文本框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr td:nth-child(1){
            text-align: right;
        }
    </style>
</head>

<body>
    <form action="">
        <table align="center">
            <tr>
                <td>姓名：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td>密码提示问题：</td>
                <td><select>
                        <option selected="selected">请选择一个问题</option>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                    </select></td>
            </tr>
            <tr>
                <td>密码提示问题答案：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>男<input type="radio" name="tex">女<input type="radio" name="tex"></td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>籍贯：</td>
                <td><select>
                        <option selected="selected">请选择</option>
                        <option value="01">SH</option>
                        <option value="02">BJ</option>
                        <option value="03">HN</option>
                    </select>省/直辖市
                    <select>
                        <option selected="selected">请选择</option>
                        <option value="01">ZZ</option>
                        <option value="02">LY</option>
                        <option value="03">XC</option>
                        <option value="03">SQ</option>
                    </select>市
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td><input type="checkbox" name="habby" checked>上网
                    <input type="checkbox" name="habby" checked>上网
                    <input type="checkbox" name="habby">体育
                    <input type="checkbox" name="habby">学习
                </td>
            </tr>
            <tr>
                <td>个人介绍：</td>
                <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
            </tr>
            <tr>
                <td>上传头像：</td>
                <td><input type="text"><input type="file" name="" id=""></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="提交"><input type="reset" value="重置"></td>
            </tr>

        </table>
    </form>
</body>

</html>

11、表单补充内容

value属性：表示文本框默认显示的文字
checked属性：默认被选中属性
selected属性：表示下拉列表被默认选中

label标签 简单理解为可以将文字和表单绑定在一起，就是在点击文字时会出现表单被选中的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label for="a">男</label>
    <input type="radio" name="tex" id="a">
    <label for="b">女</label>
    <input type="radio" name="tex" id="b">
</body>
</html>
avatar
文章
阅读
粉丝