前端HTML网页设计零基础笔记1 | 青训营笔记

177 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天 为了简单快速地掌握一些基础知识,结合在其他网站的学习了解,对其进行了一系列的整理

<head> <!--头部标签-->
	<meta charset="utf-8" /> <!--编码规范,删除会乱码-->
	<title>第一节课|青训营前端基础</title> <!--标题标签:网页名字-->
</head>

<body> <!--主体内容:网页内容-->
	
	<!--div标签:容器,把页面内容打组、分模块进行页面排版
		align=“改变内容显示的位置”:
		left居左对齐(默认! ) /center居中对齐/right居右对齐"-->
	<div align="left">

<!--1.文章题目:H标题标签<hl></hl>...<h6></h6>h1一级标签最大,h6六级标签最小,逐级递减!-->
	<h1>标题</h1>
	<h2>标题</h2>
	<h3>标题</h3>
	<h4>标题</h4>
	<h5>标题</h5>
	<h6>标题</h6>

<!--段落标签:<p></p>-->
	<p>第一节课</p>
	<p>第二节课</P>
	<p>第三节课</p>

<!--图片标签:<img/ >属性名=“属性值” 标签名和属性之间需要空格隔开,属性和属性之间空格隔开 src="图片的位器"
width="图片的宽度"
height=""图片的高度"
-->
	<img src="img/picture.jpg" width="200px" height="300px" />
<!--换行:<br />-->
	<br /><br />
	<ol>   
        <li>文字1</li>  
        <li>文字2</li>
        <li>文字3</li>
    </ol>

<!--2.无序列表:默认首位加个•,不分顺序
   实例:<ul>  <li>文字</li>  </ul>-->
	<ul>
        <li>文字A</li>  
        <li>文字B</li>
        <li>文字C</li>
    </ul>

<!--3.自定义列表:对事物进行描述
     实例:<dl>
                       <dt>事物</dt>
                       <dd>描述</dd>
                 </dl>-->
	<dl>
        <dt>事物A:</dt>
        <dd>描述XXX</dd>
        <dt>事物B:</dt>
        <dd>描述XXX</dd>
    </dl>
    
<!--4.超链接标签:<a></a>  href=""网址链接"-->
	<!--文字的连接-->
	<a href="http://www.baidu.com">青训营前端基础</a>
	
	<br /><br />
	
	<!--图片的连接-->
	<a href="http://www.baidu.com">
	<img src="img/picture.jpg"  width="100px" height="100px"  />
	</a>


</body>

以上是对网页设计的一些小知识点,还有一部分下一章继续总结