自学前端-html第一天

文艺渣渣
160 阅读4分钟

什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML标签及文本内容
  • HTML文档也叫做web页面 html的书写方法一般是：<标签>内容</标签>
    网页的组成部分：文字，图片，音频文件，视频文件，超链接。
    浏览器：是用于读取HTML文件，并将其作为网页显示。
    五大浏览器：chrome，ie，Firefox，safari，欧朋。
    每个浏览器使用的内核(引擎)不同，所以在开发中需要适配浏览器。
    html.jpg

开发中常用到的编辑器

常用的标签

文本：

<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<p>这是一个段落。</p>
<span>这是一个span标签</span>
<b>定义文本加粗／<strong>定义文本加粗（突出重要性的强调语境)
<u>下划线／<ins>定义文字下划线（突出重要性的强调语境)
<i>定义文字斜体
／<em>定义文字倾斜（突出重要性的强调语境)
<s>定义文字删除线/<del>定义文字删除线（突出重要性的强调语境)
<small>定义小文字
<sup>定义上标文字
<sub>定义下标文字

图片：

<img src="" art="替换文本(当图片不显示时显示)" title="图片标题(鼠标放在图片上显示)">这是一个图片标签

vertical-align: middle; 图片垂直居中

音频：

<audio src=“路径属性” controls(是否显示和播放控件) autoplay(自动播放属性(部分浏览器不支持)) loop(循环播放属性)>这是一个音频标签</audio>
音频标签目前支持的格式：mp3,wav,ogg

视频：

<video scr="路径属性" controls(显示播放控件的属性) autoplay(自动播放属性（chrome支持静音自动播放）) loop(循环播放属性)>这是一个视频标签</video>
视频格式目前支持的格式：mp4,wav,ogg

超链接：

<a href="#(跳转的地址,空地之后写#)" target="_self(默认属性在当前窗口跳转),_blank(在新窗口中跳转)">这是一个超链接</a>
这是一个超链接,点击跳转

列表标签

1.无序列表

<ul>
<li>无序列表第一行(可以包含各种标签)</li>
<li>无序列表第二行(可以包含各种标签)</li>
<li>无序列表第三行(可以包含各种标签)</li>
</ul>

  • 香蕉
  • 橘子
  • 西瓜
2.有序列表

<ol>
<li>无序列表第一行(可以包含各种标签)</li>
<li>无序列表第二行(可以包含各种标签)</li>
<li>无序列表第三行(可以包含各种标签)</li>
</ol>

  1. 香蕉
  2. 橘子
  3. 西瓜
3.自定义列表

<dl>
<dt>自定义列表标题</dt>
<dd>自定义列表(可以包含各种标签)</dd>
<dd>自定义列表(可以包含各种标签)</dd>
<dd>自定义列表(可以包含各种标签)</dd>
<dt>自定义列表标题</dt>
<dd>自定义列表(可以包含各种标签)</dd>
<dd>自定义列表(可以包含各种标签)</dd>
<dd>自定义列表(可以包含各种标签)</dd>
</dl>

表格

<table>
<tr>
<td>自定义列表(可以包含各种标签)</td>
<td>自定义列表(可以包含各种标签)</td>
<td>自定义列表(可以包含各种标签)</td>
</tr>
<tr>
<td>自定义列表(可以包含各种标签)</td>
<td>自定义列表(可以包含各种标签)</td>
<td>自定义列表(可以包含各种标签)</td>
</tr>
<tr>
<td>自定义列表(可以包含各种标签)</td>
<td>自定义列表(可以包含各种标签)</td>
<td>自定义列表(可以包含各种标签)</td>
</tr>
</table>


成绩表
姓名 数学成绩
姓名1 成绩 成绩
成绩 成绩

表格属性：
1.caption表格大标题 2.表头用th替换td 3.border(设置边框宽度)
4.width(设置表格宽度)
5.heigth(设置表格高度)
6.thead表头
7.tbody表格主题
8.tfoot表格底部
9.rowspan跨行合并
10.colspan跨列合并

表单属性

input属性标签

<form>表单域标签</form>
1.text文本框用于输入单行文本
文本输入框
2.password密码框用于输入密码
密码输入框
3.radio单选框用于多选一(checked默认选中属性)
男 女
4.cheakbox多选框用于多选多(checked默认选中属性)
多选框
5.file文件选择框(mulpitle选择多个文件的属性)
文件上传
6.submit 提交按钮，用于提交
提交按钮
7.rest重置按钮，用于重置
重置按钮
8.button普通按钮，无效果配合js使用
按钮

button按钮标签

type=“submit”
1.提交按钮
type=“reset”
2.重置按钮
type=“button”
3.普通按钮

select下拉菜单标签

selected默认选中

北京 上海 郑州

textarea文本域标签(文本输入框)

label标签

性别：男 女

avatar
文章
阅读
粉丝