300字范文 > 【黑马程序员pink老师前端】HTML

【黑马程序员pink老师前端】HTML

时间：2021-11-15 10:26:27

相关推荐

【黑马程序员pink老师前端】HTML

0 HTML语法规范❤️0.1 基本语法概述⭐0.2标签关系⭐1 HTML基本结构标签❤️2 开发工具❤️3 标签❤️3.1 标题标签⭐3.2 段落标签⭐3.3 换行标签⭐3.4 文本格式化标签⭐3.5 布局盒子标签⭐3.6 图像标签⭐3.7 路径⭐3.7.1 文件夹和根目录3.7.2 相对路径3.7.3 绝对路径3.8 超链接标签⭐3.9 锚点链接⭐3.10 注释⭐3.11 特殊字符⭐3.12 表格标签⭐3.12.1 表格属性3.12.2 表格结构标签3.12.3合并单元格3.13、列表标签⭐3.14 表单标签⭐3.14.1 表单域3.14.2 表单控件(表单元素)①input输入表单元素②文本框与密码框③单选框和复选框④name和value属性⑤checked和maxlength⑥submit和reset⑦button和文件域⑧label3.14.3 select下拉表单元素3.14.4 textarea文本域元素

0 HTML语法规范❤️

0.1 基本语法概述⭐

都由肩括号括起来，一般成对出现。

0.2标签关系⭐

1 HTML基本结构标签❤️

2 开发工具❤️

常用插件

用来定义当前文档显示的语言

en 定义语言为英语

zh-CN 定义语言为中文

但是英文中可以写中文，中文中也可以写英文

比如你定义法国语言但是网页中有中文，他会提示翻译

charset 常用的值有：：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符

3 标签❤️

3.1 标题标签⭐

<body><h1> 一级标题</h1><h2> 二级标题</h2><h3> 三级标题</h3><h4> 四级标题</h4><h5> 五级标题</h5><h6> 六级标题</h6></body>

加了标题的文字会变的加粗，字号也会依次变大一个标题独占一行一共六级

3.2 段落标签⭐

<p>段落标签</p>

paragraph 的缩写文本在一个段落这种会根据浏览器窗口的大小进行自动换行段落和段落之间保有空隙回车不分段

3.3 换行标签⭐

<br />

是个单标签

标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

3.4 文本格式化标签⭐

强调作用：为文字设置粗体、斜体、下划线等效果

更推荐使用第一组

3.5 布局盒子标签⭐

<div></div>:一行只能放一个，大盒子

<span></span>: 一行可以放多个，小盒子

3.6 图像标签⭐

所有属性放在img后面

<img src="pink1.jpg" alt="替换文本" title="提示文本" />

src是标签的必须属性，它用于指定图像文件的路径和文件宽度和高度只修改一个，另外一个等比缩放。都加可能会图像变形

3.7 路径⭐

3.7.1 文件夹和根目录

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。根目录：打开目录文件夹的第一层就是根目录

3.7.2 相对路径

3.7.3 绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

3.8 超链接标签⭐

<a href="链接目标的url地址" target="目标窗口的弹出方式">文本或图像</a>

a是单词anchor的缩写，意思是锚。

外部链接必须以http://开头内部链接，使用地址找空连接使用#代替下载链接，文件压缩包所在的地址网页元素(比如图片)链接：前面添加<img src="pink1.jpg"/>

3.9 锚点链接⭐

作用：点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为 #名字找到目标位置标签，里面添加一个 id属性=刚才的名字

<a href = "#two">标题个人生活</a><h3 id = "two">个人生活内容</h3>

3.10 注释⭐

注释快捷键为 ctrl + /

3.11 特殊字符⭐

重点记住：空格、大于号、小于号这三个，其余的使用的很少，如果需要使用回头查阅即可

3.12 表格标签⭐

table用来定义表格的标签tr用来定义表格中的行，必须嵌套在标签中td用来定义表格中的单元格，必须嵌套在标签中th用来定义表格中的表头，表头单元格里面的内容加粗居中显示

<body><table><tr> <th>姓名</th><th>性别</th> <th>年龄</th> </tr><tr> <td>小可爱</td><td>女</td><td>永远18</td></tr> </table></body>

3.12.1 表格属性

表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的

3.12.2 表格结构标签

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

用<thead></thead>标签表示表格的头部区域，<thead>内部必须拥有<tr>标签，一般是位于第一行用<tbody></tbody>标签表示表格的主体区域，主要是用于放数据本体以上标签都是放在<table></table>标签中

3.12.3合并单元格

跨行合并：rowspan=“合并单元格的个数”，写在最上一行跨列合并：colspan="合并单元格的个数"，写在最左侧

3.13、列表标签⭐

无序列表：<li></li>，里面只能包含<li></li>，没有顺序。<li></li>里面可以包含任何标签有序列表：<ol>，里面只能包含<li></li>，有顺序自定义列表：<dl>，里面只能包含<dt>和<dd>，<dt>和<dd>里面可以放任何标签，<dd>围绕<dt>进行说明。

<dl><dt>关注我们</dt><dd>新浪微博</dd><dd>小米部落</dd><dd>官方微信</dd></dl>

显示结果

3.14 表单标签⭐

一个完整的表单通常由表单域，**表单控件（表单元素）**和提示信息3部分组成。

3.14.1 表单域

表单域是一个包含表单元素的区域，写表单元素之前先写表单域。标签用于定义表单域，会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域的名称"> </form>

3.14.2 表单控件(表单元素)

①input输入表单元素

input输入表单元素，是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)

type 属性

其常用属性：

name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。name 是表单元素的名字，要求单选框和复选框要有相同的name值checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素

②文本框与密码框

<body><form>用户名：<input type="text"> <br/> 密码：<input type="password"></form></body>

③单选框和复选框

name 是表单元素的名字，要求单选框和复选框要有相同的name值

<form>性别：男<input type="radio"> 女 <input type="radio">爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打游戏<input type="checkbox"> </form>

④name和value属性

name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单

name的主要作用：区别不同的表单元素

<form>性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">爱好：吃饭<input type="checkbox" name="habby" value="吃饭"> 睡觉<input type="checkbox" name="habby" value="睡觉"> 打游戏<input type="checkbox" name="habby" value="打游戏"> </form>

注意：单选框和复选框name必须一致，value可以不一样