HTML自学记录

前言

编译器:vs code 2019
快捷键:!(英文字符,快速创建html模板)

书写规范

HTML代码风格

  1. 尽量使用语义化标签
  2. 统一使用小写书写标签, 属性名也采用小写
  3. 闭合空的元素标签
  4. 属性值加引号
  5. 在写属性值时, 空格两边不要有等号
  6. 避免长的代码行
  7. 严格控制空行和缩进
  8. 多加注释

CSS代码风格

  1. 尽量不要采用内联样式

  2. 不要采用标签选择器

  3. 将相关类名写在相联的位置上,不要相隔太远, 不利于阅读

  4. 不要采用隐式的权重样式覆盖

  5. 属性书写顺序

  6. 定位属性: position, display, float, left, top, right, bottom, overflow

  7. 自身属性:width, height, margin, padding, border

  8. 文字样式:font , color

  9. background

  10. 文本属性: text-align , text-overflow

  11. 其它属性
    多加注释
    提高浏览器回流, 提升DOM渲染性能
    DOM树, CSS树 => render树 => 布局 => 绘制
    浏览器解析CSS顺序是按书写的顺序 => 顺序不当就会产生回流

基本结构标签:

<!DOCTYPE html>     <!-- 声明标签,固定在<html>前,告诉浏览器当前页面采用HtML5版本显示 -->
<html lang="en">    <!-- lang定义当前文档显示的语言 en:英文  zn-CN:中文 -->
<head>
	<meta charset="UTF-8">   <!-- charset存储字符集 统一使用UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 	内容主体
</body>
</html>

常用结构标签

一、标题标签

特点:
(1)作为标题使用,一个标题独占一行
(2)默认加粗,序号越大,字体越小
(3)常用4号标题

<h1>一号标题</h1>
<h2>二号标题</h2>  
<h3>三号标题</h3>  
<h4>四号标题</h4>  
<h5>五号标题</h5>  
<h6>六号标题</h6>  
二、段落标签

特点:
(1)把html文档分割成若干段落,不同段落之间会有间隔
(2)一个段落会根据浏览器的窗口自动换行,但是不会有间隔

<p>这是一个段落标签</p>
三、换行标签

特点:
(1)单标签
(2)强制换行,行与行之间没有间隔

这是第一行<br>这是第二行
四、文本格式化标签

特点:
(1)对文本字体进行标注

<strong>加粗</strong>  或  <b>加粗</b>
<em>倾斜</em>  或  <i>倾斜</i>
<del>删除<.del>  或  <s>删除</s>
<ins>下划线</ins>  或 <u>下划线</u>
五、布局标签(盒子)

特点:
(1)布局使用,划分区域

<div></div>     分割、分区,独占一整行
<span></span>   跨行、跨距,一行可有多个
六、图像标签
<img src="url" alt="替换文字" title="提示文本"/>

常用属性:
(1)alt图像显示不出来,用文字替换
(2)title提示文本,鼠标放到图像上提示信息
(3)width设置图像宽度
(4)height设置图像高度
(5)border给图像加边框
注:一般情况下只修改宽度或高度,图片会等比例进行缩放

url选择:
(1)同一级路径:直接写 “文件名”
(2)下一级路径:“文件夹/文件名”
(3)上一级路径:"…/文件名"

七、超链接标签
<a href = "跳转url" target=”打开方式“> 文字信息 </a>

常用属性:
(1)target:打开窗口的方式,默认当前页面_self;新页面打开 _blank
(2)href = “#” 空链接
(3)href = “文件名” 下载链接

锚点链接设置:快速定位页面中的某个位置
(1)设置属性值 href = “#id名”
(2)目标位置设置id属性 id = “名称”

八、注释标签

快捷键:ctrl + /

<!-- 这是一段注释 -->
九、特殊字符
空格 &nbsp;
小于号 &lt;
大于号 &gt;
十、表格标签

1、基本格式

<table>
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

常用属性: (写在table标签里)
(1)对齐方式:align = left / center / right
(2)边框:border
(3)单元格与内容之间的空白:cellpadding
(4)单元格与单元格之间的空白:cellspacing
(5)表格宽度:width

2、表头标签

<th> </th>  加粗居中

3、表格结构标签

<thead>表头</thead>
<tbody>表体</tbody>

4、合并单元格

rowspan:跨行合并 (目标单元格上侧)
colspan:跨列合并 (目标单元格左侧)

<table width  = "500" height = "249" border="1" cellspacing = "0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
十一、列表标签

1、无序列表

<ul>
	<li>选项一</li>
	<li>选项二</li>
</ul>

特点:
(1)ul 标签中只能有 li 标签
(2)无序列表中没有顺序之分
(3)li 标签中可以放其他标签

2、有序列表

<ol>
	<li>选项一</li>
	<li>选项二</li>
</ol>

特点:
(1)ol 标签中只能有 li 标签
(2)li 标签中可以放其他标签

2、自定义列表

<dl>
	<dt>标题</dt>
	<dd>解释1</dd>
	<dd>解释2</dd>
<dl>

特点:
(1)dl 标签中只能有 dt 和 dd 标签

十二、表单标签

1、基本框架

<form action="url" method="提交方式" name="表单域名称">
        各种表单元素控件
</form>

2、元素控件

2.1 input 标签

<input type = "属性值"  name = "元素名称" value = "提示文字">

特点:
(1)input为单标签
(2)type属性指定不同的控件类型

常用:
文本框

<input type = "text" name = "username" value = "请输入用户名" maxlength = "6">

密码框

<input type = "password" name = "pwd">

单选框

男 <input type = "radio" name = "sex" value = "男" checked = "checked">
女 <input type = "radio" name = "sex" value = "女">

复选框

吃饭 <input type = "checkbox" name = "hobby" value = "吃饭" checked = "checked">
睡觉 <input type = "checkbox" name = "hobby" value = "睡觉">

提交按钮

 <input type = "submit" value = "提交按钮名称">

重置按钮

<input type = "reset" value = "重置按钮名称">

普通按钮 (结合JS使用)

<input type = "button" value="普通按钮名称">

上传文件

<input type="file">

label 标签: 用于绑定一个表单元素

<!-- 点击文字相当于点击按钮,for属性绑定元素id -->

<label for="sex">男</label>
<input type="radio" id="sex" >

2.2 select 标签

下拉框表单元素

<select>
     <option selected="selected" >选项一</option>
     <option>选项二</option>
     <option>选项三</option>
</select>

2.3 textarea 标签

文本域表单元素,输入多行文本信息时使用

<textarea cols="每行字符数" rows="行数">默认文字</textarea>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值