HTML总结

最新推荐文章于 2022-06-26 16:26:24 发布

weixin_38902950

最新推荐文章于 2022-06-26 16:26:24 发布

阅读量93

点赞数

分类专栏： Web前端开发文章标签： HTML总结

本文链接：https://blog.csdn.net/weixin_38902950/article/details/83586626

版权

Web前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、HTML语言：标签、元素、属性

<img src = "log.jpg" alt = "站标" />
img:标签
src，alt：属性
整个构成一个：元素

2、HTML文件结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

<!DOCTYPE html>：符合html5标准的文件结构
lang属性：告诉搜索引擎 en英文，zh中文
<meta>:元数据，charset属性是字符集编码方式

3、HTML标签（1）简单标签

1、标题：h1~h6
<h1>这是一级标题</h1>
<h6>这是六级标题</h6>
一个页面最好只有一个一级标题

2、段落：p
<p>段落内容,每个段落自动换行</p>
<p>段落内部文字忽略连续空格，也不会显示空行，且不会换行</p>

3、换行：<br/>
单独出现的标签，表示换行
<p>这是一个段落<br/>注意换行</p>

4、空格字符：&nbsp
特殊字符，全小写
<p>段落内部文字忽略连续&nbsp&nbsp&nbsp空格</p>
将显示三个空格

5、预留格式：pre
<pre>
预留格式文本会完全保留连续空格和空行，以及
换行，很适合显示计算机代码
for(int i=0;i<n;i++){
}
</pre>

6、行内组合span
<p>最新的<span>中国人口调查报告</span>指出..</p>
结合CSS样式来格式化
<style type = "text/css">
span{
    color:blue;
    font-weight:bold;
}
</style>

7、水平线：hr
<hr/>

8、注释
<!--注释内容-->
<!--注释不会在浏览器中显示--
可以跨行-->

4、HTML标签（2）超链接和图片标签

1、超链接a
<a href = "网址">文字或图片</a>
链接到本站点其他网页： <a href = "news.html">新闻</a>
注意目录关系，从本页面的目录为根目录开始找，上层是两个点 ../sites/index.html

链接到其他网址：<a href = "http://www.baidu.com">百度</a>

虚拟超链接：<a href = "#">板块2</a>

例子：<p><a href = "http://www.xx.com">一带一路</a></p>

2、img 标签
jpg：有损压缩，色彩鲜艳
gif：简单动画，背景透明
png：无损压缩、透明、交错、动画

<img src = "w3school.gif" alt = "w3c" />
src属性：路径加文件名，可以用绝对路径也可以相对路径，最好相对，适合迁移

5 HTML标签（3）区域div、列表ul，ol、表格table

1、div
<div align="center">
    <h1>Web 前端开发</h1>
    <p>HTML</P>
</div>

2、ul li
<h1>Web前端开发</h1>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

ol 有序

3、table tr td
<table border = "1">
    <th>表头</th>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

6 HTML标签（4）表单

<form> </form> 
表单，是一个区域，采集用户信息
表单元素：文本框、按钮、单选、复选、下拉列表、文本域

1、文本框、密码框input
<form>
    账户：<input type ="text" name = "userName"/>
    <br/>
    密码：<input type = "password" name = "userPsd">
</form>

2、按钮，提交/重置
<input type = "submit" value = "提交" name = "submitbtn" /> 
<input type = "reset" value = "chongzhi" name = "xxx" />

3、单选框、复选框
<input type = "radio|checkbox" value = "值" name = "名称" checked = "checked"/>
checked 默认选择
example

<form>
    性别：
    男 <input type = "radio" value = "boy" name = "gender" checked = "checked"/>
    女 <input type = "radio" value = "girl" name = "gender"/>
    <br/> 
    爱好
    <input type = "checkbox" value = "1" name = "nusic" checked = "checked"/>音乐
    <input type = "checkbox" value = "2" name = "sport" /> 体育
    <input type = "checkbox" value = "3" name = "read" /> 阅读
</form>

4、下拉列表框select option
<select>
    <option>选项1</option>
    <option selected = "selected">选项2</option>  //默认选中选项2
</select>

5、文本域textarea
<textarea rows = "行数" cols = "列数">文本</textarea>

总结：
<input type = " ">
    text
    password
    submit
    reset
    radio
    checkbox
<select>
    <option>
<textarea>

weixin_38902950

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML总结

1、HTML语言：标签、元素、属性&lt;img src = "log.jpg" alt = "站标" /&gt;img:标签src，alt：属性整个构成一个：元素2、HTML文件结构&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8
复制链接

扫一扫