day 42 前端HTML

一 . HTML

  1 . HTML是一门超文本标记语言,用于创建网页的标记语言,本质上是浏览器可以识别的语言,HTML是一门标记语言,它不是一种编程语言,HTML使用标签来描述网页,不像python编程语言一样,有逻辑什么的,这个标记语言是没有逻辑的,多敲多练多记多背就行了。

  HTML最基本的文本结构:

  

<!DOCTYPE html>   # 声明为HTML5文档
<html lang="zh-CN">   #这个lang表示语言,zh-CN是中文的意思,就是说,你整个文档的内容以中文为主,如果以英文为主,就写成lang='en'
<head> # 最开始的部分 <meta charset="UTF-8"> #字符集是UTF-8 ,有些网站是gbk,要观察仔细不要乱码 <title>css样式优先级</title> # 标题 </head> # 到这里结束标题 <body> # 主要内容部分开头 </body> # 主要内容结束 </html> # HTML文档结束收尾

HTML标签有些是成对出现的,比如<div>和</div>
也有一些是单独呈现的,比如<br/>,<hr/>,<img src="1.jpg"/>等
  2.两个常用的到的标签:

<div> :块级标签,没有实际意义。通过CSS样式赋予不同的表现,
   <span> : 内联标签,也没有实际意义,通过CSS样式赋予不同的表现,
   两个标签嵌套只能用块级标嵌套内联标签,内联标签不能在外面,外部可以引入多个块级标签相同嵌套。

  3.head常用标签

   

<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息

  meta标签有http-equiv属性和name属性

     http-equiv相当于http文件头作用,它向浏览器传一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值content,传递参数变量值。

  name用于描述网页,对应的属性值是content,传递参数变量值。

  4.body内常用标签(块级标签和内联标签)

不加标签的纯文字也是可以在body中写的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr> #就是单独个一个水平线
每次加上一些内容,别忘了刷新一下页面,才能看到新添加的效果或者内容,其实上面这些标签很少用

5.img标签和a标签
 
  img 用来打开图片路径,图片未加载成功的提示,设置高和宽还有鼠标悬浮时的信息。
  a 标签用来打开网页超链接的,可以是网页也可以是图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
  
6.列表
  

 1.无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

    type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

    2.有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

    type属性: start是从数字几开始

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

    3.标题列表(就像大纲一样,有一个层级效果)

复制代码
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>  
  7.表格
  表格最重要的目的就是显示表格类的数据,按表格的形式再在网页上面给你打开
  
<table border='1'>
  <thead> #标题部分
  <tr> #一行
    <th>序号</th> #一个单元格
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody> #内容部分
  <tr> #一行
    <td>1</td> #一个单元格
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

!!还有input标签和from标签都去敲一下
  https://www.cnblogs.com/clschao/articles/10077261.html
  
原文地址:https://www.cnblogs.com/liuteacher/p/10114375.html