美文网首页
day22-html

day22-html

作者: xdxh | 来源:发表于2018-10-29 20:12 被阅读0次

一、html

1.web标准

a.结构标准(html)：决定网页中的内容。
b.表现标准(CSS)：决定网页中内容的布局和样式。
c.行为标准(JavaScript)：决定网页中的行为和动作(变化)。

2.html

a.什么是html

html:超文本标记语言
标记语言：通过不同的标记来显示不同的内容(以指定的格式)
超文本：除了文本以外还可以标记图片、超链接、音频、视频、flash、输入框、按钮等
html文件就是后缀是.html的文件，html文件可以直接用浏览器打开，看到网页效果。

注意：html中大小写不敏感(大写和小写一样，HTML,html,HtML,hTMl等是一样的)

b.html结构(树)

html基本结构是一个html标签中包含两个平行的head标签和body标签。
head中的内容除了title和icon以外其他的内容都不可见。body代码代表网页的部分内容，里面的标签一般都是可见的。

代码

<html>
    <head>
    
    </head>
    <body>
    
    </body>
</html>

c.html版本

代码

<!DOCTYPE html> -- html5
-->


<!-- 说明html版本 
    <!DOCTYPE html> -- html5
--> 
<!DOCTYPE html>

<!-- html基本结构 -->
<html>
    <head>
        <!-- 设置字符编码方式 -->
        <meta charset="utf-8" />
        
        <!-- 设置网页标题 -->
        <title></title>
    </head>
    
    <body>
        
    </body>
</html>

二、html标签

标签 == 标记

1.标签语法

双标签(常规标签)：<标签名 属性名1:属性值1 属性名2:属性值2...> 标签内容 </标签名>
单标签：<标签名 属性名1:属性值1 属性名2:属性值2... /> 或者 <标签名 属性名1:属性值1 属性名2:属性值2...>

说明：
标签名 -> 是html中已有的标签，不能自己随便命名。标签名和<以及标签名和/之间都不能有空隙
属性 -> 属性和属性值之间用:链接，多个属性之间用空格隔开，所有的属性没有位置要求。
标签内容 -> 在开始标签和结束标签之间，标签的内容可以是任意的(可以是文本也可以是其他标签)

2.head标签中的内容

head中的标签有：title,mate,base,link,style,script

title -> 设置网页标题
meta -> 设置网页元数据(单标签)

3.body标签中的内容

body中的标签主要用来在网页的内容中添加显示信息的。

代码

<!DOCTYPE html>
<html>
    <head>
        <!-- 设置网页内容的编码方式 -->
        <meta charset="UTF-8">
        
        <!-- 设置网页标题 -->
        <title>html标签</title>
    </head>
    <body>
    </body>
</html>

测试结果

三、文本标签

1.标题标签

h1 - 大标题
h2 - 副标题
h3 - 副标题下的副标题
...

2.段落标签：p

一个段落使用一个p标签，每个p标签中的内容显示完成后会自动换行。

3.特殊功能标签

html中文本中的换行、空格、tab等都是无效的(空白无效)
换行：

空格：&nbsp;&emsp;

4.字体相关标签

加粗：b标签/strong标签
b标签只是单纯的文字效果加粗，strong标签有强调的意思。

倾斜：i标签/em标签
i标签只是单纯的文字效果>倾斜，em标签有腔调的意思。

水平线：<hr>

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本标签</title>
    </head>
    <body>
        <h1>我是标题1</h1>
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <h4>我是标题4</h4>
        <h5>我是标题5</h5>
        <h6>我是标题6</h6>

        <p>段落1</p>
        <p>段落2</p>
        
        <p>
            &nbsp;&nbsp;&nbsp;窗前明月光，<br />
            &nbsp;&nbsp;&nbsp;疑是地上霜。<br />
            &nbsp;&nbsp;&nbsp;举头望明月，<br />
            &nbsp;&nbsp;&nbsp;低头思故乡。<br />
        </p>

        <hr />
        <p>
        <b>窗前</b><i>明月</i>光，<br />
        <strong>疑是</strong><em>地上</em>霜。<br />
        举头望明月，<br />
        <strong><em>低头思故乡</em></strong>。<br />
        </p>
    </body>
</html>

测试结果

1.PNG

四、列表标签

列表标签分为有序列表、无序列表、自定义列表。

1.有序列表

ol标签 -> 代表整个列表
li标签 -> 代表列表中的元素

2.无序列表

ul标签 -> 代表整个列表
li标签 -> 代表列表中的元素

3.自定义列表

dl标签 -> 代表整个列表
dt标签 -> 分组名
dd标签 -> 分组中的内容

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表标签</title>
    </head>
    <body>
        <ol>
            <li>基础语法</li>
            <li>web前端</li>
            <li>web后端</li>
            <li>数据和人工智能</li>
            <li>项目</li>
        </ol>

        <ul>
            <li>python人工智能</li>
            <li>HTML5</li>
            <li>Java大数据</li>
            <li>自动化测试</li>
        </ul>
        
        <dl>
            <dt>Python教学部</dt>
            <dd>余婷</dd>
            <dd>骆昊</dd>
            <dd>王海飞</dd>
            <dd>肖世荣</dd>
            
            <dt>H5教学部</dt>
            <dd>吴老师</dd>
            <dd>丁老师</dd>
            <dd>周老师</dd>
        </dl>
    </body>
</html>

测试结果

2.PNG

五、图片和超链接

1.图片标签：img

单标签

a.src属性：图片地址(可以是本地图片路径也可以是网络图片的url)
本地图片：地址可以是绝对路径也可以是相对路径，一般将图片放在img文件夹中，然后写相对路径。
b.title -> 设置图片标题(鼠标停留在图片上，显示的内容)
c.alt -> 设置图片加载失败的提示信息

2.超链接标签：a标签

a. 内容 -> 文字/图片

b. href -> 跳转的目标地址
(1)网页地址 -> 跳转到指定的网页
(2)本地的html文件地址 -> 跳转到本地的html对应的网页中
(3)空 -> 刷新网页
(4)选择器 -> 在当前网页中跳转到指定的位置

c.target -> 跳转方式
_self -> 默认值，在当前页面加载新的页面(原网页被覆盖)
_blank -> 在新的页面中加载新的页面(原网页还在)

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片和超链接</title>
    </head>
    <body>
        <!-- 显示一张本地图片 -->
        <img id="top" src="img/touxiang1.jpg" title="余文乐" alt="加载失败"/>
        
        <img title="北极星" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=1f6a894f11950a7b613846966bb809bc/0b46f21fbe096b63a5468c2900338744ebf8ac68.jpg"/>
    
        <!-- 文字超链接 -->
        <a href="https://www.baidu.com">
            百度一下
        </a>
        <!-- 图片超链接 -->
        <a href="https://www.baidu.com">
            <img src="img/touxiang1.jpg"/>
        </a>
        
        <a href="03-列表标签.html">列表标签</a>
        <a href="">刷新</a>
        <a href="#top">回到顶部</a>
        
        <a href="https://www.baidu.com" target="_blank">百度一下</a>
    </body>
</html>

测试结果

3.PNG

六、数据表格

1.表格标签

table标签 -> 整个表格
tr -> 行
td -> 单元格

2.边框相关的属性

border -> 边框的宽度
bodercolor -> 设置边框的颜色(颜色值可以是英语单词，也可以是RGB对应的16进制值)
cellspacing -> 单元格和单元格之间的间隙
cellpadding -> 设置内容和单元格边框之间的间距

3.背景颜色

bgcolor -> 背景颜色
a.作为table属性 -> 设置整个表格的背景颜色
b.作为tr属性 -> 设置一行的背景颜色
c.作为td属性 -> 设置某一个单元格的背景颜色

4.宽度和高度

width -> 设置宽度
height -> 设置高度

a.作用于table -> 设置整个表格的宽度和高度(会按比例分配每一行和每一列的宽度和高度)
b.分别设置每一行的高度和每一列的宽度
应用：细线表格
第一步：设置整个表格的背景颜色(边框颜色)和每个单元格的背景颜色(表格内容的颜色)不一样。
第二步：设置cellspacing的值为边框的宽度。

5.对齐方式

align -> center(居中)/left(左对齐)/right(右对齐)
a.作用于table，让整个表格在其父标签中居中/左对齐/右对齐
b.作用于tr，让整行中的每个单元格中的内容在其单元格中居中/左对齐/右对齐
c.作用于tr，让指定的单元格中的内容居中/左对齐/右对齐

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
        <table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="20" bgcolor="antiquewhite">
            <!-- 第一行 -->
            <tr bgcolor="azure">
                <td>First Name</td>
                <td bgcolor="beige">Last Name</td>
                <td>Points</td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td>John</td>
                <td>Jackson</td>
                <td>96</td>
            </tr>

        </table>
        <br />
        
        <table bgcolor="black" cellspacing="1" width="300" height="200">
            <tr bgcolor="wheat">
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <tr bgcolor="wheat">
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="wheat">
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <br />

        <!-- 单独设置每一行和每一列的宽度和高度 -->
        <table bgcolor="black" cellspacing="1" align="center">
            <tr align="center" bgcolor="wheat" height="40">
                <td width="120">姓名</td>
                <td width="100">年龄</td>
                <td width="80">性别</td>
            </tr>
            <tr bgcolor="wheat" height="60">
                <td align="center">小明</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr bgcolor="wheat" height="60">
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

测试结果

4.PNG

七、复杂表格

1.制作复杂表格的方法

a.确定表格的最大行数，在table中用tr表示出来
b.确定每一行有多少个单元格，用td表示出来
c.确定每一个单元格是否有合并现象。如果是行合并就设置rowspan的值，如果是列合并就设置colspan的值

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复杂表格</title>
    </head>
    <body>
        <table border="1" cellspacing="0" width="300" height="200">
            <tr>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <br />
        
        <table border="1" cellspacing="0" width="300" height="200">
            <tr>
                <td colspan="2"></td>
                <td colspan="4"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td rowspan="2" colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
        </table>
        <br />
        
        <table border="1" cellspacing="0" width="300" height="200">
            <tr>
                <td colspan="2"></td>
                <td colspan="4"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td rowspan="3" colspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2" colspan="2"></td>
            </tr>
        </table>
    </body>
</html>

测试结果

5.PNG

八、作业

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>个人简历</title>
    </head>
    <body>
        <p align="center" style="font-size: 30px;">个人简历</p>
        <table align="center" border="1" cellspacing="0" width="600" height="800">
            <tr>
                <td align="center" width="70" height="35">
                    学院
                </td>
                <td colspan="6" align="center">
                    <a href="http://www.yxnu.edu.cn/index.html">数学与信息技术学院</a>
                </td>
                <td rowspan="5" colspan="3" width="80">
                    <img width="120" height="120" src="img/renwu.jpg"/>
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    专业
                </td>
                <td colspan="6" align="center">
                    <a href="http://www.yxnu.edu.cn/index.html">计算机科学与技术</a>
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    姓名
                </td>
                <td align="center" width="70" height="35">
                    余乐
                </td>
                <td align="center" width="70" height="35">
                    性别
                </td>
                <td align="center" width="70" height="35">
                    男
                </td>
                <td align="center" width="70" height="35">
                    名族
                </td>
                <td colspan="2" align="center">
                    汉族
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    出生年月
                </td>
                <td align="center" width="70" height="35">
                    1996年11月
                </td>
                <td align="center" width="70" height="35">
                    籍贯
                </td>
                <td align="center" width="70" height="35">
                    云南玉溪
                </td>
                <td align="center" width="70" height="35">
                    身高
                </td>
                <td colspan="2" align="center">
                    176cm
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    学历
                </td>
                <td align="center">本科</td>
                <td align="center" width="70" height="35">
                    政治面貌
                </td>
                <td colspan="4" align="center">
                    团员
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    毕业意向
                </td>
                <td colspan="10">
                    网络爬虫工程师
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    兴趣爱好
                </td>
                <td colspan="10">
                    旅游
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    个人说明
                </td>
                <td colspan="10">
                    人丑话不多
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    家庭住址
                </td>
                <td colspan="10">
                    地球
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    住宿地址
                </td>
                <td colspan="2">
                    地球
                </td>
                <td align="center" width="70" height="35">
                    联系电话
                </td>
                <td width="100">
                    保密
                </td>
                
                <td align="center" width="70" height="35">
                    手机
                </td>
                <td colspan="3">
                    保密
                </td>
            </tr>
            <tr>
                <td align="center" width="70" height="35">
                    任职情况
                </td>
                <td colspan="10">
                    无
                </td>
            </tr>
            <tr>
                <td  align="center" rowspan="10" width="70" height="35">
                    本</br>
                    人</br>
                    简</br>
                    历
                </td>
                <td colspan="2" height="35" align="center">时间</td>
                <td colspan="2" height="35" align="center">学校</td>
                <td colspan="3" height="35" align="center">任职</td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="2"></td>
                <td colspan="2"></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="10"></td>
            </tr>
            <tr>
                <td colspan="10"></td>
            </tr>
            <tr>
                <td colspan="10"></td>
            </tr>
            <tr>
                <td colspan="10"></td>
            </tr>
            <tr>
                <td colspan="10"></td>
            </tr>
            <tr>
                <td colspan="10"></td>
            </tr>
        </table>
    </body>
</html>

测试结果

6.PNG

相关文章

  • day22-html

    一、html 1.web标准 a.结构标准(html)：决定网页中的内容。b.表现标准(CSS)：决定网页中内容的...

  • day22-HTML和CSS

    1.表单标签 02-表单标签(下拉和多行文本域) 03-空白标签 04-认识CSS 05-CSS选择器 06-伪类选择器

  • day22-HTML和CSS

    一、标杆标签 二、下拉菜单 三、空白标签 四、认识CSS 五、CSS选择器 六、伪类选择器

  • day22-html和css

    一、表单标签 1、表单标签：form标签表单标签是用来收集用户信息的，是一个容器，用来获取这个标签中相应的其他标签...

网友评论

      本文标题：day22-html

      本文链接：https://www.haomeiwen.com/subject/datbtqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|day22-html|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！