前言
基于对黑马pink老师前端html课程总结,提取其中精华部分,做出的总结笔记
一、什么是html
▪ HTML是网页的结构(网页还包括表现CSS、行为js)
▪ HTML 指的是超文本标记语言
▪ HTML 不是一种编程语言,而是一种标记语言
▪ 标记语言是一套标记标签 (markup tag)
▪ HTML 使用标记标签来描述网页
▪ HTML 文档包含了HTML标签及文本内容
▪ HTML文档也叫做web 页面
二、如何创建页面
2.1使用工具
VScode
2.2创建步骤
1首先在VScode创建一个新的文件
2保存文件为xxx.html
3编写代码(注输入”!”可直接生成html骨架)
4通过alt+B可打开页面
三、html正式学习
3.1语法规范及关系
注:一般都是双标签
3.2 html基本结构标签
< title>网站名称< /title>
< body>文件的内容< /body>
3.3html常用标签(上)
3.3.1标题标签< h1>-< h6>
(在< body>标签内,显示在页面内)
3.3.2段落标签
段落间有较大空隙
3.3.3换行标签(单标签)
<br/>强制换行,段落间没有空隙
3.3.4文本格式化标签
3.3.5< div>和< span>标签
没有语义,类似盒子,装内容
3.3.6图像标签
3.3.7超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
<h4>1.外部链接</h4>
<a href="https://www.csdn.net/" target="_blank"> CSDN</a>
<h4>2.内部链接: 网站内部页面之间的相互链接,在同一文件夹中</h4>
<a href="gongsijianjie.html" target="_blank">gongsijianjie</a>
<h4>3.空链接:#</h4>
<a href="#">没有做完的链接</a>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="img.zip">下载文件</a>
<h4>5.网页元素的链接,点击图片跳转网页</h4>
<a href="https://www.csdn.net/"><img src="img.jpg"/></a>
<h4>6.锚点链接,类似目录,点击链接,定位页面某个位置</h4>
<a href="#名字">需要跳转文字,一定要加入#</a>
<a id="刚才的名字">跳转后的部分,双引号中的名字和前面插入锚点的名字部分相同,id属性加入什么标签都行
3.3.8注释标签
<!--注释语句,不执行在页面中,方便阅读-->
快捷键ctrl+/
3.3.9特殊标签
主要记住的特殊字符
空 格,要加分号
大于号<
小于号>
3.4常用标签(下)
3.4.1表格标签
表格标签是用来展示数据的
3.4.1.1表格的基本语法
<body>
<table> <!--定义表格标签-->
<tr> <!--定义表格的行,必须嵌套在<table>标签里-->
<td>单元格内的文字</td> <!--定义表格的单元格,必须嵌套在<tr>标签里-->
</tr>
</table>
</body>
表格是用来展示页面的
3.4.1.2 表头单元格标签
<tr>
<th> 表头单元格</th>
</tr>
表头单元格也是单元格,常用于表格第一行,突出重要性,里面的文字会加粗居中显示
3.4.1.3表格属性
<!--这些属性要写到表格标签table里面-->
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" width="500" height="249">
<!--align属性名,属性值为left center right,规定表格相对周围元素的对齐方式-->
<!--border属性名,属性值1或"",规定表格是否有边框,默认为"",表示没有边框-->
<!--cellpadding属性名,属性值像素值,单元格内容和边框之间的空白,默认为1-->
<!--cellspacing属性名,属性值像素值,单元格和单元格之间的距离,默认为2-->
<!--width属性名,属性值像素值或百分比,规定表格的宽度-->
<!--height属性名,属性值像素值或百分比,规定表格的高度-->
3.4.1.4表格结构标签
<table>
<thead> <!--用于定义表格的头部,里面必须有<tr>标签,放在<table>中-->
<tr>
<th>
</th>
</tr>
</thead>
<tbody><!--用于定义表格的主体,用来放数据本体,放在<table>中-->
<tr>
<td>
</td>
</tr>
</tbody>
</tabke>
3.4.1.5合并单元格
步骤
- 先确定是跨行还是跨列合并,跨行用rowspan,跨列用colspan。
- 找到目标单元格,写上合并方式=合并单元格数目,跨行写在上面的单元格内,跨列写在左边的单元格内。如 < td rowspan=“2”></ td>
- 删除多余的单元格
下面进行代码展示
<tr>
<td></td>
<td></td>
<td></td>
</tr><!--初始单元格-->
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
上述代码在网页中的显示
3.4.2列表标签
列表是用来布局的
3.4.2.1无序列表
<body>
<ul> <!--定义页面中项目的无序列表,<ul>只能嵌套<li>-->
<li>列表项</li> <!--定义列表项,<li>放什么都可以-->
<li>列表项</li>
</ul>
</body>
3.4.2.2无序列表
<body>
<ol> <!--定义页面中项目的有序列表,<ol>只能嵌套<li>-->
<li>列表项1</li> <!--定义列表项,<li>放什么都可以-->
<li>列表项1</li>
<li>列表项1</li>
</ol>
</body>
3.4.2.3自定义列表
对
<body>
<dl> <!--定义页面中项目的自定义列表,<dl>只能嵌套<dt>与<dd>-->
<dt>名词1</dt> <!--经常是一个<dt>对应多个<dd>描述,包含关系-->
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
</body>
3.4.3表单标签
表单由表单域 表单控件 提示信息组成
3.4.3.1表单域
<form action="demo.php" method="POST" name="name1">
</form>
<!--<form> 标签用于定义表单域-->
<!--<action> 属性,属性值url地址,用于指定并处理表单数据的服务器程序的url地址-->
<!--<method> 属性,属性值get/post,用于指定并设置表单数据的提交方式-->
<!--<name> 属性,属性值名称,用于指定表单的名称,以区分同一个页面的多个表单域-->
3.4.3.2表单控件
< input >输入表单元素,< input>为单标签
<form action="xxx.php" method="get">
<!--text文本框,用户可以在里面输入任何文字-->
<!--value规定input元素的值,即提示信息,打开显示的文字-->
<!--maxlength属性,属性值正整数,规定输入字段中字符的最大长度-->
用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!--password 密码框,用户看不见输入的信息-->
密码:<input type="password" name="pwd"> <br>
<!--radio 单选按钮,可以实现多选一-->
<!--name是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1-->
<!--checked属性单选按钮和复选框可以设置,当页面打开的时候可以默认选中这个按钮-->
性别:男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br>
<!--checkbox 多选按钮,可以实现多选-->
兴趣爱好:吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby" checked="checked"> <br>
<!--submit定义提交按钮,可以把表单域form里面的表单元素里面的值提交给后台服务器-->
<input type="submit" value="免费注册"> <br>
<!--重置按钮可以还原表单元素初始的默认状态-->
<input type="reset" value="重新填写"> <br>
<!--普通按钮 button,后期结合js,搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!--文件域 使用场景 上传文件使用的-->
上传头像:<input type="file"> <br>
</form>
1.name和value是每个表单元素的属性值
2.name表单元素的名字,要求单选按钮和复选框要有相同的name值
3.checked属性主要针对单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素
< label>下拉标签
<label for="sex">男</label> <input type="radio" id="sex"/>
<!--label标签用于绑定一个表单元素。当点击标签内文本时,浏览器就会自动聚焦选择对应表单元素上,-->
< label>标签的for属性应当与相关元素id属性相同
< select>表单元素,下拉表单
<form>
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
</form>
< textarea>文本域元素
<!--cols="每行中的字符数",rows="显示的行数",实际不用,知道就行-->
<form>
今日反馈:
<textarea rows="3" cols="50">
文本内容
</textarea>
</form>
四、总结
以上就是html的全部内容,希望可以对大家有用,如有问题请指正