HTML5-CSS3
HTML元素的lang属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
html元素是HTML文档的根元素,一个文档中只能有一个,其他所有元素都是它的后代元素
w3C标准建议为html元素增加一个lang属性,作用是
帮助语音合成工具确定要使用的发音
帮助翻译工具确定要使用的翻译规则
lang="en"告诉浏览器︰这个HTML文档的语言是英文。
lang="zh"表示这个HTML文档的语言是中文。
head元素嵌套的元素
1.head元素里面的内容是一些“元数据”(元数据︰描述数据的数据)
一般用于描述网页的各种信息,比如字符编码、网页标题、网页图标
2.title元素
网页的标题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东(JD)</title> <link rel="icon" href="https: / /www.jd.com/favicon.ico"> <style> h1{ color:red; font-size: 50px; } </style> </head> <body> <h1>彭于晏哈哈哈哈哈</h1> </body> </html>
3.meta元素
可以用于设置网页的字符编码,让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码
—般都使用UTF-8编码,涵盖了世界上几乎所有的文字
在HTML5之前,meta标签的写法也是比较复杂的
<meta http-equiv="Conten-Type" content="text/html"; charset="UTF-8">
4.body元素
里面的内容将是你在浏览器窗口中看到的东西,也就是网页的具体内容和结构
5.h元素
表示网页的标题
h1~h6共规定了6个等级的标题
6.p元素
表示文章中的一个段落( paragraph )
标签 | 功能相同点 | 功能不同点 |
---|---|---|
p标签 | 有行间距,默认前后换行 | 不保留空格和换行,字体不变 |
pre标签 | 有行间距,默认前后换行 | 保留空格和换行,变为等宽字体 |
7.strong元素
用于强调某些文本,粗体的显示效果
8.code元素
用于显示程序代码
9.br元素
在不产生一个新段落的情况下进行换行,使用< br/>标签。
8.hr元素
分割线
9.
<b> 加粗效果
<i> 斜体效果
<u> 下划线效果
HTML文本格式化
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<big> | 定义大号字 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
< sub> | 定义下标字 |
< sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
HTML样式
style 属性用于改变HTML元素的样式。 *background-color属性为元素定义了背景颜色; font-family定义了文本的字体系列; color 定义了字体颜色; font-size定义了字体尺寸; text-align规定了元素中文本的水平对齐方式。*
要想在网页中正确地显示这些预留子符,必须便用子符实体,书写格式一般有2种
&entity_name;
&#entity_number;
比较常用的有
描述 | 实体名称 | 实体编号 | |
---|---|---|---|
空格 |   ; |   ; | |
< | 小于号 | < ; | O ; |
> | 大于号 | > ; | > ; |
& | 和号 | & ; | & ; |
" | 双引号 | " ; | " ; |
‘ | 单引号 | &apos ; | ' ; |
分(cent) | ¢ ; | ¢ ; | |
镑[pound) | £ ; | £ ; | |
¥ | 元(yen) | ¥ ; | ¥ ; |
欧元(euro) | &euro ; | € ; | |
小节 | § ; | § ; | |
版权(copyright) | © ; | © ; | |
注册商标 | ® ; | ® ; | |
商标 | &trade ; | ™ ; | |
× | 乘号 | × ; | × ; |
÷ | 除号 | ÷ ; | ÷ ; |
字符实体练习
<body> <div title="我是一段‘特殊’的文本"> 我是彭于晏 </div> </body>
常用快捷键:
shift + alt + ↑ | 块移动或行移动 |
---|---|
Ctrl+D | 复制上一行到下一行 |
Ctrl+/ | 可以把选中的代码全部注释掉 |
shift+F6 | 重命名 |
shift+F | 搜索 |
Alt+F2 | 打开浏览器 |
ctrl+alt+L | 格式化代码 |
shift+tab | 退格 |
Ctrl+X | 删除行 |
ctrl+k | 代码快速格式化 美观 |
span元素的使用
p标签指一个段落,是块级元素,span是行内元素,一般单独修饰文字;
span 标签可以放在p标签里,p标签不应该放在span标签里;
<head> <meta charset="UTF-8"> <title>彭于晏</title> <style> .text { color: blue; font-size: 30px; } .new-price{ color: red; font-size: 30px; } .oid-price { color: aquamarine; text-decoration: line-through; } </style> </head> <body> 我是一段文本 <span class="text"> 我也是一段文本 </span> <!-- 价格的显示--> <P> <span class="new-price">¥69</span> <span class="oid-price">¥99</span> </P> </body>
div元素的使用
<head> <meta charset="UTF-8"> <title>Title</title> <style> .box1 { float: left; } .box2 { float: right; } </style> </head> <body> <div class="box1"> <h2>哈哈哈哈哈</h2> <P>hahahahaha</P> </div> <div class="box2"> <h2>呵呵呵呵呵呵呵</h2> <P>hehhehehehhehe</P> </div> </html>
结论1
标签 | 功能 |
---|---|
div | 定义文档中的分区或节(division/section)。一般用于用于对大的内容块设置样式属性 |
span | 没有特定的含义,一般用于用于为部分文本设置样式属性 |
ing元素相对路径
img元素如果只设置了width (或height ),浏览器会自动根据图片宽高比计算出height (或width )
在HTML5规范中,alt是img元素的必要属性
width、height的默认单位是px,像素
<body> <p>本地图片地址(相对路径)</p> <img src="..\img\03.jpg" alt="" width="300" > <!-- alt属性:当图片(加载失败)时 显示文本 --> <img src="https://safa" alt="gif图片"> </body>
常用图片格式
png: 静态图片,支持透明
jpg : 静态图片,不支持透明
gif : 动态图片、静态图片,支持透明
<iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" height="400" frameborder="no" border="0" width="20%"> </iframe> 原文链接:https://idealclover.top/archives/617/ 2021新冠实时疫情图
网站推荐
iconfont 网址查找你想要的小图标
favicon制作图标大小
https://html5.tool.webfrontend.dev/ 学习标签信息
https://www.w3school.com.cn/html/html_css.asp学习HTML
flatuicolors 颜色选择
<l -- body标签的bgco1or团性指定背景颜色。--> <!-- <body bgcolor="blue"> --> <l -- body标签的background属性指定背景图片。 --> <body background="images/01.png">
无序列表
标签 | 英文含义 | 功能 |
---|---|---|
ul | unordered lists 的缩写 | 无序列表的外边界 |
li | list item的缩写 | 列表项 |
<h2>我的笔记</h2> <h3>前端技术的作用?</h3> <<ul> <li> <h4>HTML</h4> 结构,决定网页的结构和内容。(是什么) </li> <li> <h4>cSS</h4> 表现,设定网页的表现样式。(什么样子) </li> <li> <h4>Javascript</h4> 行为,控制网页的行为。(做什么) </li> <hr> <!-- 无序列表 --> <!-- h3+ul>li*3 --> </ul> <h3>网站上线流程</h3> <ul> <li>购买域名</li> <li>购买服列器</li> <li>网站备案</li> <ul> <li>需要在规定的背景布前拍照</li> <li>需要提交规定的表格及资料</li> <li>通过时长略有不同</li> </ul> </ul> <hr>
属性 属性值
disc(实心圆)
type circle(空心圆)
square(方块)
- 看书
- 玩游戏
- 游泳
有序列表
标签 | 英文含义 | 功能 |
---|---|---|
ol | ordered lists的缩写 | 有序列表的外边界 |
li | list item的缩写 | 列表项 |
<!-- 有序列表 --> <!-- h3+ol>li*3 --> <h3>网站开发流程</h3> <ol> <li>网站策划</li> <li>网页设计</li> <li>前端开发</li> <li>后端开发</li> <li>测试上线</li> </ol> <hr >
自定义列表
标签 | 英文含义 | 功能 |
---|---|---|
dl | definition lists的缩写 | 自定义列表的外边界 |
dt | definition term的缩写 | 列表项中的标题 |
dd | definition description的缩写 | 列表项中的内容 |
<!-- 自定义列表 --> <h3>常见问题</h3> <dl> <dt><b>域名选择有什么建议吗?</b></dt> <dd>答:尽量选主流域名。比如cn.com. net等;</dd> <dd>域名长度建议控制在8个字符左右,可以使用英文单词、全拼、简拼来注册</dd> <dt><b>服务器购买需要注意什么呢?</b></dt> <dd>答:建议根据功能需要来选择配置;</dd> <dt><b>网站域名都需要备案吗?</b></dt> <dd>答:使用国内的服务器空间,必须备案。</dd> </dl>
表格
标签 | 英文含义 | 功能 |
---|---|---|
table | 表格 | 表格的外边界 |
tr | table row的缩写 | 定义行 |
td | table data cell的缩写 | 定义单元格 |
<table border="" cellspacing="" cellpadding=""> <tr><th>课程表</th></tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <!-- (tr>td*4)*5 --> <tr><!-- 总共几行 这里是5行 --> <td>1</td><!-- 一行有几个单元格 这里是4个 --> <td>2</td> <td>3</td> <td>4</td> </tr> ..... </table>
table的属性
属性名 | 功能 | 常用属性值 |
---|---|---|
border | 设置边框 默认为0 没有边框 | 单位为px像素值 |
cellspacing | 外边距,设置单元格与单元格之间的距离 | 单位为px像素值 |
cellpadding | 内边距。设置文字与单元格之间的距离 | 默认1px |
width | 设置表格的宽度 | 单位px,或者百分比 |
height | 设置表格高度 | 单位px,或者百分比 |
align | 设置表格在网页中的对齐方式 | left左 right右 center居中 |
bgcolor | 设置背景颜色 | white red green |
表格的合并
标签 | 功能 | 属性值 |
---|---|---|
colspan | 单元格贯穿多少列(横向合并单元格) | 数值 |
rowspan | 单元格贯穿多少行(纵向合并单元格) | 数值</ |