HTML

最新推荐文章于 2022-12-16 23:43:52 发布

Will1997

最新推荐文章于 2022-12-16 23:43:52 发布

阅读量130

点赞数

分类专栏： JavaEE学习总结

本文链接：https://blog.csdn.net/qq_42371269/article/details/82261866

版权

JavaEE学习总结专栏收录该内容

23 篇文章 9 订阅

订阅专栏

HTML ：超文本标记语言 --网页（hyper text mark language）

1.文件结构：标签一般成对出现

<html>

<head> ... </head> // 文件头部标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题
主要的是网页中与内容无关的部分（不显示内容）

<body> ... </body> // 文本签里放的是要显示的内容部分

</html>

2.常用标签

标题标签： <h1> ~ <h6> 标题从 1 到 6 ，依次减小

版本标签：<!DOCTYPE html> 说明当前版本文是 html5

段落标签：<p> 段落内容 </p> （带换行）,普通文本是不会自动换行的

分割符： <hr> 分割线不需要结束标签，添加一道横线

换行符： <br>换行不需要结束标签

标签的属性：格式：属性名 = “属性值” 可以定义标签的宽( width ) , 高( height)，颜色（color）...

特殊转义字符： &lt ( < ) %gt( > )

图片标签：<img src=" 图片路径（相对路径）/ 图片名" ，alt =" 当图片找不到时，提示的内容" >

超链接标签：<a href= "要跳转的目标" > 超链接提示的文字 </a>

方式一：href = "要跳转的目标网址" （页面间的跳转）

方式二：href = "#另一个标签的 id 值 " （锚点）（页面内的跳转）

例：图片作为超链接 <a href=" " > <img src="相对路径 / 图片名 " > </a>

列表标签：

（1）无序列表： <ul>

</ul>

(2) 有序列表： <ol>

</ol>

表格：

<table>

<tbody> 表体

</tbody>

</table>

快速生成表格的写法:

生成表格的父子关系，4行3列
table>tbody>tr*4>td*3

同时生成thead和tbody 需要用() 把他们分组，平级的用+连在一起
table>(thead>tr>td*3)+(tbody>tr*4>td*3)

给table加属性的快捷写法
table[border=1][width=100%]>tbody>tr*2>td*2

合并属性： colspan=值（n）合并同一行中的 n 列
<td colspan="2">行1列1</td> // colspan=2 将两个td合并为一个

rowspan=值（n）合并同一列中的 n 行

<th> : 与 <td>一样表示列，<th> 其中的文本默认是居中并加粗

表单：用来收集用户录入信息（重用与登录注册）

<input type="text"> 文本框标签
<input type="password"> 密码框 <input type="email"> 输入邮件地址
<input type="date" value="日期初始值"> 日期选择标签
<input type="time" value="时间初始值"> 时间选择标签 <input type="file"> 文件选择框 <input type="button" value="按钮文字"> 按钮
<input type="reset" value="重置"> 重置按钮把页面所有填写的内容重置到初始状态
<input type="submit" value="提交"> 提交按钮把表单填好的信息发送给服务器
<button type="button|reset|submit">按钮文字</button>

<input type="radio"> 单选按钮

<!-- name取值相同的单选按钮视为同一组 
     checked 表示是否默认选中， 
     对于这种取值只有“是否”这两种情况的属性， 有两种写法：
         一种是只写属性名，
         另一种是名="值"  
-->

<p>
      男<input type="radio" name="sex" checked="checked">  <!--check表示默认被选中-->
      女<input type="radio" name="sex">
  </p>

  <p>
      未婚<input type="radio" name="married" checked>  
      已婚<input type="radio" name="married" > 
      离婚<input type="radio" name="married" >
  </p>

<input type="checkbox"> 复选按钮

<!--
    name取值相同的复选按钮视为同一组, 
   同样可以用checked表示是否默认选中
-->

<p>

	读书<input type="checkbox" name="hobby">
	玩游戏<input type="checkbox" name="hobby">
	听音乐<input type="checkbox" name="hobby">
	敲代码<input type="checkbox" name="hobby" checked> <!-- 默认被选中 -->
</p>

下拉列表标签
<select>
<option>值1</option>
<option>值2</option>
....
<option>值n</option>
</select>
如果希望某个option默认被选中，在option上添加属性selected
写法1： selected
写法2： selected="selected"

文本域标签 : 适合输入多行文本内容
<textarea cols="宽" rows="高"></textarea>

取值是布尔值的属性
checked 配合单选按钮、复选按钮使用
selected 配合option标签使用
readonly 表示只读，可以配合大部分表单标签使用
disabled 表示禁用，跟只读类似，不能修改，
而且在表单提交时，不会发送disabled属性的数据
加在按钮上，禁用这个按钮
required 是否必填，如果空值，不允许提交表单