web前端学习笔记总页面
网页基础布局
html
html基础结构
html基础标签
htm标签属性
html文本格式化标签
html实体转义符+html块级标签和行级标签
W3C规范+html语义化标签+文件命名规范
1.1输入html:5然后按Tab自动生成代码
（一般新建页面会自己有html基础结构代码 不需要这样创建)
html:5<!-- 按！+Tab 或者html:5+Tab会自动生成文档结构 -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><!-- 移动端开发设置 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 默认打开是edge浏览器 --><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body>在boby中写入
<!-- 按！+Tab 或者html:5+Tab会自动生成文档结构 -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><!-- 移动端开发设置 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 默认打开是edge浏览器 --><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><!-- 1.div :布局 没有具体含义 层 --><div>adc<div>de</div></div><!-- 2.hx:标题，x从1-6 ，h1级最大最粗，h6最小，有默认字号 --><h1>biu</h1><h3>biu</h3><h5>biu</h5><h6>biu</h6>运行结果
<p>只是段落标签
<!--3. p:表示段落，相当于一个回车 --><p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1] 华为是全球领先的信息与通信技术（ICT）解决方案供应商，专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p><p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1] 华为是全球领先的信息与通信技术（ICT）解决方案供应商，</p>专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、</p>企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p><!-- 4.br 换行 单标签<br/>--><p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1] 华为是全球领先的信息与通信技术（ICT）解决方案供应商，<br/>专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、<br/>企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。<br/>2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。<br/>华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p><p>标签的运行结果
<br/>标签的运行结果
<!-- 5.hr:水平线 单标签<hr>--><hr/><!-- width:长度 align：位置 color：颜色 size：粗细 --><hr width="80%" align="center" color="red" size="4" />运行结果
<!-- 6.a:超连接 --><a href="01base.html">基础页面</a><a href="">百度</a> <!-- 网页自身跳转到百度 --><!--target: _blank 另外打开页面进行跳转，原来的页面还在 ，_self 自身跳转 target可以在head中设置 <base target="_blank" />title：鼠标移到连接文本会有提示 --> <a href="" target="_blank" title="百度"> 百度</a><!-- 开启另外一个页面跳转到百度 -->运行结果
点基础页面会跳入上一节写的基础结构页面 可以连接本地的资源
在没有设置target时会自身跳转到百度
设置
<a href="" target="_blank" title="百度"> 百度</a><!-- 开启另外一个页面跳转到百度 -->会另外开启一个页面进行跳转
<!-- 7.img：用来加载外部图片，图像。 src：加载图片的路径 alt:当图片加载不出来时显示，否则不会显示 title：鼠标移到图片上会提示--><img src="=http%3A%2F%2Fimg.jj20%2Fup%2Fallimg%2Ftp09%2F21042G4331941H-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642646028&t=b41f3695366576ae04407fca7644dc8e" title="向日葵" alt="呜呜呜~加载不出来"><img src=".jpeg?token=a495910d20353cc4ff551c757dbee70f" alt="呜呜呜~加载不出来" >
运行结果
<!-- 8.span:布局 分割一行 --><div><span>首页</span> <span>购物车</span> <span>推荐</span></div><div><div>首页</div><div>购物车</div><div>推荐</div></div>运行结果 span可以将一行分割开
输入ul>li{li$}*3 然后按住tab
<!-- 9.ul/ol ul:有序列表 ol：无序列表，列表内容都用li标签表示-->ul>li{li$}*3 ol>li{li$}*3 会自动生成
<ul><li>li1</li><li>li2</li><li>li3</li></ul><ol><li>li1</li><li>li2</li><li>li3</li></ol> <!-- 9.ul/ol ul:有序列表 ol：无序列表，列表内容都用li标签表示--><!-- ul>li{li$}*3 --><!-- <ul><li>li1</li><li>li2</li><li>li3</li></ul> --><!-- ol>li{li$}*3 --><!-- <ol><li>li1</li><li>li2</li><li>li3</li></ol> --><ol><li>li1</li><li>li2</li><li>li3</li></ol><ul><li>li1</li><li>li2</li><li>li3</li></ul>运行结果
完整的练习代码
<!-- 按！+Tab 或者html:5+Tab会自动生成文档结构 -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><!-- 移动端开发设置 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 默认打开是edge浏览器 --><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body><!-- 1.div :布局 没有具体含义 层 --><div>adc<div>de</div></div><!-- 2.hx:标题，x从1-6 ，h1级最大最粗，h6最小，有默认字号 --><h1>biu</h1><h3>biu</h3><h5>biu</h5><h6>biu</h6><!--3. p:表示段落，相当于一个回车 --><p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1] 华为是全球领先的信息与通信技术（ICT）解决方案供应商，专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p><p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1] 华为是全球领先的信息与通信技术（ICT）解决方案供应商，</p>专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、</p>企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p><!-- 4.br 换行 单标签<br/>--><p>华为技术有限公司，成立于1987年，总部位于广东省深圳市龙岗区。 [1] 华为是全球领先的信息与通信技术（ICT）解决方案供应商，<br/>专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、<br/>企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力于实现未来信息社会、构建更美好的全联接世界。<br/>2013年，华为首超全球第一大电信设备商爱立信，排名《财富》世界500强第315位。<br/>华为的产品和解决方案已经应用于全球170多个国家，服务全球运营商50强中的45家及全球1/3的人口。</p><!-- 5.hr:水平线 单标签<hr>--><hr/><!-- width:长度 align：位置 color：颜色 size：粗细 --><hr width="80%" align="center" color="red" size="4" /><!-- 6.a:超连接 --><a href="01base.html">基础页面</a><a href="">百度</a> <!-- 网页自身跳转到百度 --><!--target: _blank 另外打开页面进行跳转，原来的页面还在 ，_self 自身跳转 target可以在head中设置 <base target="_blank" />title：鼠标移到连接文本会有提示 --> <a href="" target="_blank" title="百度"> 百度</a><!-- 开启另外一个页面跳转到百度 --><!-- 7.img：用来加载外部图片，图像。 src：加载图片的路径 alt:当图片加载不出来时显示，否则不会显示 title：鼠标移到图片上会提示--><img src="=http%3A%2F%2Fimg.jj20%2Fup%2Fallimg%2Ftp09%2F21042G4331941H-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642646028&t=b41f3695366576ae04407fca7644dc8e" title="向日葵" alt="呜呜呜~加载不出来"><img src=".jpeg?token=a495910d20353cc4ff551c757dbee70f" alt="呜呜呜~加载不出来" ><!-- 8.span:布局 分割一行 --><div><span>首页</span> <span>购物车</span> <span>推荐</span></div><div><div>首页</div><div>购物车</div><div>推荐</div></div><!-- 9.ul/ol ul:有序列表 ol：无序列表，列表内容都用li标签表示--><!-- ul>li{li$}*3 --><!-- <ul><li>li1</li><li>li2</li><li>li3</li></ul> --><!-- ol>li{li$}*3 --><!-- <ol><li>li1</li><li>li2</li><li>li3</li></ol> --><ol><li>li1</li><li>li2</li><li>li3</li></ol><ul><li>li1</li><li>li2</li><li>li3</li></ul>
</body>
</html>本文发布于:2024-02-02 00:37:57，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170681085840258.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
