文章目录
- (1)软件使用
- 1.用visual studio创建html文件
- (2)在html代码中进行注释
- (3)title和body和head
- (4)body里的一些文本标签语法
- 1.标题 h(块元素)
- 2.段落 p(块元素)
- 3.换行 br
- 4.空格 nbsp
- 5.加粗 strong 或 b
- 6.斜体 i 或 em 或 cite
- 7.上标 sup
- 8.下标 sub
- 9.中划线 s
- 10.下划线 u
- 11.大字号 big 和小字号 small
- 12.水平线 hr
- 13.div标签
- 14.自闭合标签
- 15.特殊符号
- (5)body里的一些列表标签语法
- 1.有序列表 (ol里面li)
- 2.无序列表 (ul里面li)
- 3.定义列表 (dl里面dt和dd)
- (6)body里的一些表格标签语法
- 1.表格基本结构 (table里面tr,tr里面td)
- 2.表格标题 caption
- 3.表格表头 th
- 4.表格语义化
- 5.合并行 rowspan
- 6.合并列
- (7)body里的一些图片标签语法
- 1.图片 <img/>
- 2.路径 src=" xxxx"
- 3.alt和title属性
- 4.相对路径
- (8)body里的一些超链接标签语法
- 1.文本超链接和图片超链接 a href
- 2.超链接打开方式 target
- 3.内部链接 a href
- 4.锚点链接 (像目录的效果) id
- (9)body里的一些表单标签语法 (form)
- 1.form标签属性
- 2.input标签
- ①单行文本框 text 与密码框 password
- ②单选框 radio
- ③复选框 checkbox
- ④普通按钮 button 和提交按钮 submit
- ⑤重置按钮 reset
- ⑥文件上传 file
- ⑦多行文本框 textarea
- ⑧下拉列表 (select里面option)
- (10)body里的框架标签语法 (iframe)
- 1.作用
- 2.例子
(1)软件使用
1.用visual studio创建html文件
然后在资源管理器的项目,右键
即可添加一个html文件
ps : 敲代码的时候,如果先敲<>,再往里填的话,就没有代码自动补齐了,如果先敲<然后填内容,再敲>就会有自动补齐,这样子就不用敲结束标签了,只用敲开始标签就好了,因为当你敲下>就出现自动补齐了。
# 2.运行html文件
快捷键:ctrl+shift+w
(2)在html代码中进行注释
<!-- 在这里插入代码 -->
(3)title和body和head
1.title是标题
2.body是内容
3.head里的标签语法
<meta>自动刷新跳转
用法:
(3秒后跳转到百度)
<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
(4)body里的一些文本标签语法
1.标题 h(块元素)
<h2>标题的加粗样式,有很多种 ( 比如h1、h2、h3、h4、h5、h6,其中h1是最大的)
2.段落 p(块元素)
<p>新段落。就是在后面自带换行(段落标签p会使段落与段落之间有间隙,换行标签br不会有间隙)
区分"块元素"和"行内元素"
①块后面不用br来换行,自己就会换。
②除了块元素标签,其它标签为行内元素标签,都不会自己换行。
③块元素标签内部可以容纳其它块元素和行内元素。
3.换行 br
<br>或者<br/>,都相当于" \n",换行,放在另一个标签里也可以
4.空格 nbsp
  ; 相当于空格。
其中一个汉字约等于三个nbsp。
(1、2、3、4的示例)
(1、2、3、4的示例)
5.加粗 strong 或 b
①<strong> 填充内容 </strong> ,加粗
②<b> 填充内容 </b>,加粗
6.斜体 i 或 em 或 cite
①<i>填充内容</i> ,斜体
②<iem填充内容</em> ,斜体
③<cite>填充内容</cite> ,斜体
7.上标 sup
<sup> 上标内容 </sup>
8.下标 sub
<sub> 下标内容 <sub>
9.中划线 s
<s> 内容 </s>
10.下划线 u
<u> 内容 </u>
11.大字号 big 和小字号 small
①<big> 内容 &t;/big> ,大字号
②<small> 内容 &t;/small> ,小字号
12.水平线 hr
<hr/>或者<hr>都是一长条水平线
13.div标签
①作用:用来划分区域(在代码比较多的时候就可以用div划分一下区域,方便看)
②用法:<div> 分区内容 </div>
14.自闭合标签
一、自闭合标签(只有开始符没有结束符)
1.head里的:
<meta charset="utf-8"/>
2.body里的:
水平线<hr/>
换行<br/>
二、一般标签
相对自闭合标签的是一般标签(有开始符号和结束符号,比如 <p> 段落内容 </p> )
15.特殊符号
(5)body里的一些列表标签语法
1.有序列表 (ol里面li)
①ol的子元素只能是li,不能是其它标签(div、p这些都不行,直接放文本也不行)。
ol标签和li标签需要配合一起使用,不能单独使用。ol的type默认为数字。
②ol的type
type属性取值:
属性值 | 列表符号值 |
---|---|
1 | 阿拉伯数字:1、2、3…(默认) |
a | 小写字母:a、b、c… |
A | 大写字母:A、B、C… |
2.无序列表 (ul里面li)
①ul的子元素只能是li,不能是其它标签(div、p这些都不行,直接放文本也不行)。
ul标签和li标签需要配合一起使用,不能单独使用。ul的type默认为空心圆
②ul的type
type属性取值:
属性值 | 列表符号值 |
---|---|
disc | 实心圆(默认) |
circle | 空心圆 |
square | 实心正方形 |
③无序列表比有序列表常用
3.定义列表 (dl里面dt和dd)
①dl是定义列表,dt是定义名词,dd是定义描述
(6)body里的一些表格标签语法
1.表格基本结构 (table里面tr,tr里面td)
table是表,tr是表里的行,td是单元格(默认没有边框,后面学到css就可以加边框了)
2.表格标题 caption
3.表格表头 th
4.表格语义化
thead是表头意思,tbody是表身意思,tfoot是表脚意思。
tfoot很少用得到,一般tfoot用于统计数据。
只起到语义清晰作用,可以提高可读性和可维护性,没有实际用途(就是说没有也行)。
<body>
<table>
<caption>表格标题 </caption> <!--标题-->
<thead> <!--表头标识-->
<tr>
<th>名字</th>
<th>语文</th>
</tr>
</thead>
<tbody><!--表身标识-->
<tr>
<td> 小红 </td>
<td> 90 </td>
</tr>
<tr>
<td> 小明 </td>
<td> 100 </td>
</tr>
</tbody>
<tfoot><!--表脚标识-->
<tr>
<td> 平均 </td>
<td> 95 </td>
</tr>
</tfoot>
</table>
</body>
5.合并行 rowspan
注意看红色框框那里的a、b
意思:让td rowspan="2"这个标签跨越两行
6.合并列
可以在th(表头)里 colspan也可以在td(一个普通的单元格)里solspan
(7)body里的一些图片标签语法
1.图片 <img/>
2.路径 src=" xxxx"
3.alt和title属性
①alt:当图片无法显示的时候就显示alt的内容
②title:鼠标放在图片上就会显示title的内容
4.相对路径
例题:
答案:
<img src="../../img/haizei.png" alt=""/>
(第一次是和conlumn并列,第二次是和blog并列,又因为img和blog并列,所以就可以接img了)
ps:…/只能往上一层,所以要有两个…/
(8)body里的一些超链接标签语法
1.文本超链接和图片超链接 a href
①文本超链接
(记得打http://,没有它不行的)
②图片超链接(比如下面例子,点那张图片就可以跳到报读)
2.超链接打开方式 target
属性 | 说明 |
---|---|
_self | 在原来窗口打开链接(默认值) |
_blank | 在新窗口打开链接(常用) |
_parent | 在父窗口打开链接 |
_top | 在顶层窗口打开超链接 |
3.内部链接 a href
4.锚点链接 (像目录的效果) id
(9)body里的一些表单标签语法 (form)
1.form标签属性
属性 | 说明 |
---|---|
name | 表单名称 |
method | 提交方式 |
action | 提交地址 |
target | 打开方式 |
enctype | 编码方式 |
下面这个也比较常用 method=“post”(安全性比较好)
2.input标签
①单行文本框 text 与密码框 password
都是可读写的框
属性 | 说明 |
---|---|
value | 默认值 |
size | 长度 |
maxlength | 最多可输入字符数 |
②单选框 radio
type="radio"是单选框,name是组别的名字,相同的name就是相同组,同一组只会选中一个(自动互斥),value是圈圈的值
(name和value都必须要设置,因为这是radio的语法)
③复选框 checkbox
④普通按钮 button 和提交按钮 submit
普通按钮button一般用于触发事件,写JavaScript时就会用到了
提交按钮summit一般用于提交数据给服务器
(这里的summit按下去会提示要不要保存密码)
⑤重置按钮 reset
按下reset按钮,同一form里的单行文本框和密码框和多行文本框都能重置(即恢复默认值)
比如下面这个
按下重置后,就是下图,即将同一form内的所有文本框重置为默认值
⑥文件上传 file
目前只能获取文件绝对路径
⑦多行文本框 textarea
格式:<textarea rows="行数" cols="列数">默认内容</textarea>
⑧下拉列表 (select里面option)
默认显示第一个选项(要按一下那个箭头才能显示下拉列表)
属性 | 说明 |
---|---|
multiple | 设置下拉列表可以选择多项,ctrl+鼠标左键来选多项 |
size | 设置下拉列表显示几个列表项,为整数 |
(下面两种都没有箭头按,直接就显示下拉列表了)
例:multiple:
例:size:(注意,chrome最低是4,但ie无限制)
option标签属性
属性 | 说明 |
---|---|
selected | 是否被选中 |
value | 选项值,用于JavaScript触发事件 |
例:selected
(10)body里的框架标签语法 (iframe)
1.作用
实现内嵌框架,即在当前页面再嵌入一个或多个其它网页
比如下图就是嵌入了百度和淘宝
2.例子
iframe是内嵌标签,src是路径,width是宽度,height是高度