HTML初识

最新推荐文章于 2023-08-01 16:15:02 发布

原创最新推荐文章于 2023-08-01 16:15:02 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

1. 标签/属性/元素
标签:
就是以<>包含的特定字符串，通常用开始标签和结束标签
双边标签：<标签名>内容</标签名>
单边标签：<标签名 />
属性：
<标签名属性1="值1" 属性2='值2' 属性3=值3>内容</标签名>
属性都是【键值对】形式
iPhone8=5888
建议:
标签的属性值要使用双引号包含
元素:
一个完整的标签称之为元素
2. 全局架构标签：
<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

</body>
</html>
注意事项：
1. 所有的内容，必须全部写在HTML标签内
2. head标签里面的内容不会展示在页面当中

3. 所有需要展示的内容，都要放到body里面

3，超链接标签：<a></a>
href:目标地址/mailto/tel
target:打开页面的方式，_blank 新建空白页，重新打开
title：鼠标悬停之后的提示
name:可以作为锚点，跳转

其他标签作为锚点：可以用id属性

<a href="https://www.baidu.com">百度一下,你就知道</a> <br />

<a href="http://www.163.com">网易</a> <br />

4，格式控制

      <ul type="none">
<li>郑州现在是伪限购</li>
<li>郑州现在有八个可行性方式转户口到郑州</li>
<li>租房合同</li>
<li>三年以内的大学生毕业生</li>
  </ul>
<ol type="a" start="2">
<li>郑州现在是伪限购</li>
<li>郑州现在有八个可行性方式转户口到郑州</li>
<li>租房合同</li>
<li>三年以内的大学生毕业生</li>
</ol>
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
   <dd>内容3</dd>

</dl>

这是效果

5，图片

src: 文件路径
发现可以是一个网络上的地址
width:宽度
height:高度

<body>

<img src="img/timg.jpg" width="50" height="50" alt="阿狸" title="测试阿狸"/>

<imgsrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514197768016&di=34861e38b40f7d4f05873946a467c071&imgtype=0&src=http%3A%2F%2F00.imgmini.eastday.com%2Fmobile%2F20170812%2F20170812092158_d2fbf6b8944d02f8f014ab969c226962_6_mwpm_03200403.jpg" />

</body>

6，视频，音频

</html>

7,外联样式主要是搞懂路径问题

外联样式表【重点】

方式3：外联样式表【重点】
是借助于head标签里面的link标签来连接在html 文件之外的样式表
rel="stylesheet" 样式表
type="text/css" 可视化的CSS文件
href="CSS文件所在路径" URL

外联样式表的好处：
1. 多个页面可以同时使用一个CSS样式表：例如：淘宝的搜索详情页
2. 提高加载效率，因为都是同一张CSS样式，加载一次之后，可以保存在
本地缓存中，方便下一次使用

3. 可以加快页面的加载，也可以节省用户的流量和服务器带宽

8，表单

<html>
<head>
<meta charset="UTF-8" />
<title>表单！！！</title>
</head>
<body>
<p>表单不会，剃头来见</p>
测试输入框:<input type="text" name="name" placeholder="请输入用户名"
maxlength="5"/> <br />
<hr />


<form action="2.html" method="get">
用户名:<input type="text" name="username" placeholder="请输入用户名"/> <br />
密码:<input type="password" name="password" placeholder="请输入密码"/> <br />

性别:<input type="radio" id="nan" name="sex" value="0" checked/>
<label for="nan">男</label>
<input type="radio" id="nv" name="sex" value="1" />
<label for="nv">女</label> <br />
出生年月:
<input type="date" name="birthday"/> <br />
爱好:
<input type="checkbox" name="like[]" value="basketball" checked/>篮球
<input type="checkbox" name="like[]" value="music"/>音乐
<input type="checkbox" name="like[]" value="swim"/>游泳 <br />
籍贯:<select name="city">
<option value="河南">河南</option>
<option value="内蒙古" selected>内蒙古</option>
<option value="山东">山东</option>
</select> <br />
头像:
<input type="file" name="icon" /> <br />
自我描述
<textarea name="desc" cols="100" rows="10"></textarea> <br />
<input type="hidden" name="size" value="200"/>

<input type="button" value="这个能不能用？？" />
<input type="reset" value="重置" />
<button>看看这个是啥</button>
<input type="submit" value="注册"/><br />
</form>
</body>

</html>