前端学习之HTML入门
今天是前端学习的第N次的第1天,之所以说是学习的第N次,是因为之前学习过很多次,具体几次,不记得了。因为自己不经常写前端,所以自己现在又忘记了,这也说明了至少学习的次数不够多。就连之前自己写的网页源码放在哪里都不记得了。现在我又没办法独立搭建一个网页了。这也是我再次学习前端的原因。此次在简书上记录自己的学习过程,主要是为了自己以后方便查阅、复习。顺便发布出来,有兴趣的小伙伴,可一同学习探讨。因为最主要是为了服务自己,所以,很多简单的地方,都会直接略过。各位见谅。
使用的编辑工具,phpStorm,也可以用其他的IDE(开发工具)
使用的浏览器,火狐浏览器
HTML 超文本标记语言
因为计算机用的语言与人类不一样,所以,有必要将人类语言进行翻译,告诉计算机。
<p></p> p:段落标签,作用,告诉计算机,p标签内的是一个段落。
HTML中常用的转义字符,
不断行的空格
  半方大的空格
  全方的空格
< 小于<
> 大于>
& &符号
" 双引号“
© 版权符号©
® 已注册商标®
<h1></h1> h1标签 标题标签 方便seo优化
<img src="" alt=""> img标签
<a href=""></a> 超级链接标签 target="_blank" 在新窗口打开
a标签的锚点用法
<a href="#num-1" >跳转到num-1的地方</a>
<a name="num-1"><p>test</p></a> 把name属性修改成id属性同样可以定位
无序列表
<ul><li>......</li></ul>
作用:此列项目使用粗体圆点(典型的小黑圆圈)进行标记
<ul>
<li>我的文件
<li>我的图片
</ul>
列表项内部可使用段落、换行符、图片、链接以及其他列表等
<ol><li>......</li></ol>
作用:列表项目使用数字进行标记
<ol>
<li>我的文件
<li>我的图片</li>
</ol>
列表项内部可使用段落、换行符、图片、链接以及其他列表等
表格
表格table、tr、td、border、width
作用 用于表格、行、列、宽度、边框的制作
实例 制作课程表
table元素中的width为50%时,是父级元素的宽度的50%
align 与 valign 可以用在tr与td上
<form action="" method="">
<!-- label标签的作用,方便控制文字元素-->
<label>请输入姓名:</label><input type="text" name="name" id="name">
<label>请输入密码:</label><input type="text" name="password" id="password">
<label>请再次输入密码:</label><input type="text" name="confirmpassword" id="confirmpassword">
<label>性别:</label><input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<label>兴趣爱好:
<input type="checkbox" value="1">看书
<input type="checkbox" value="2">游泳
<input type="checkbox" checked="checked" value="3">思考
<input type="checkbox" value="4">爬山
<label>生日
<select name="year" id="">
<option value="2020">2020
<option selected="selected" value="2019">2019
<option value="2018">2018
<option value="2017">2017
</select>年
<label>头像:</label> <img src="./img/headLogo/15.gif" alt="">
<select name="head" id="">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<!-- button在通过js与后端交互时后使用-->
<input type="button" value="普通按钮">
<!-- 直接通过form表单提交时后进行使用-->
<input type="submit" value="提交按钮">
<!-- 多行输入框-->
<textarea name="" id="" cols="30" rows="10">
请输入
<!-- 文件域-->
<input type="file"> <input type="button" value="上传">
000<input type="hidden">000
<!-- 下拉列表框变成普通列表框-->
<select name="" id="" size="4">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<!-- 共键-->
<select name="" id="" size="4">
</form>
<!--靠右对齐-->
<form action="">
<td align="right"><label>请输入姓名:
<td><input type="text" name="name" id="name">
<td align="right"><label>请输入密码:
<td><input type="text" name="password" id="password">
<td align="right"><label>请再次输入密码:
<td><input type="text" name="confirmpassword" id="confirmpassword">
<td align="right"><label>性别:
<td><input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<td align="right"><label>兴趣爱好:
<td><input type="checkbox" value="1">看书
<input type="checkbox" value="2">游泳
<input type="checkbox" checked="checked" value="3">思考
<input type="checkbox" value="4">爬山
<td align="right"><label>生日:
<td><select name="year" id="">
<option value="2020">2020
<option selected="selected" value="2019">2019
<option value="2018">2018
<option value="2017">2017
</select>年
<td align="right"> <img src="../img/headLogo/15.gif" alt=""><label>头像:
<td><select name="head" id="">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<td align="center" colspan="2"><input type="submit" value="提交按钮">
</form>
(以下源码不开放,只为自己更方便查阅)
源码位置:我的网盘>前端入门的第N次>第一天HTML入门>html