码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2020-05-19 01:00:26      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:意思   classname   add   页面   爬虫   外部   快捷键   sub   常见   

HTML作为客户端,首先需要一个服务器socket

import socket

sk = socket.socket()
sk.bind((‘127.0.0.1‘, 8080))
sk.listen(5)
while 1:
con, addr = sk.accept()
data = con.recv(9000)
print(data)
con.send(b‘HTTP/1.1 200 OK\r\n\r\n‘)
# con.send(b‘o98k‘)
# con.send(b‘<h1>hello world<h1>‘)
with open(‘2 第一个html文件.html‘, ‘rb‘)as f:
con.send(f.read())

con.close()

HTML简易模板介绍
<!DOCTYPE html> <!--#声明一个html文件-->
<html lang="zh-CN"> <!--lang语言,这个页面的主要语言是中文-->
<head>
<meta charset="UTF-8"><!--中文的网站需要设置meta charset="UTF-8"-->
<title>CSS样式优先级</title>
<style>
h1 {color: red;
}
</style>
<script>alert(123)</script>
<meta name="keywords" content="树下野狐">
<meta name="description" content="覆雨翻云">
<!-- meta name = description是网页描述 meta name = keywords是关键字 content里面搜索引擎的关键字,用于爬虫机器人-->
</head>
<!--#head标签不是给用户看的,是给浏览器看的-->

<body>
<h1>小伙子要加油</h1>
<a href="https://www.cnblogs.com/Selbst/">‘断浪狂刀忆年少‘</a>

</body>
</html>

HTML常用的标签
  head标签:
1. <title></title> 定义网页标题
2.<style></style> 定义内部样式表
3.<script></script> 定义js代码或引入外部js文件
4.<link/> 引入外部样式表文件
5.<meta> 定义网页原信息-->

标签的语法:1. <标签名 属性1=‘属性值‘,属性2="‘属性值">内容部分</标签名>
2.<标签名 属性1=‘属性值‘,属性2="‘属性值".../>

标签几个重要属性:
1.id 定义标签的唯一ID,HTML文档树中唯一
2.class:为html元素定义一个或多个类名(classname)(CSS样式类名)
3.style:规定元素的行内样式(CSS样式)


<!--快捷键:比如写一个h1按下tab键标签就出来了-->
<!--注释:-->
<!-- 1.在html里面&lt;!&ndash;&ndash;&gt;代表注释-->
<!-- 2.我们可以以某个部分start end 来写,使用分区来写-->
<!-- head start -->

<!-- head end-->

<!--首页 广告区 开始-->

<!--首页 广告区 结束-->

  body标签:
展示给用户看的标签:
 Body标签中的常用标签
1. 常用标签的分类
1. 独占一行的 块儿级标签
1. h1~h6
2. p 段落标签可以写大量文字
3. div
4. hr (在页面上加一条横线)
      5. li
6. tr

2. 在一行显示的 行内标签/内联标签
1. a
2. span
3. img
4. b 加粗 /i 斜体/u 下划线/s删除
    5.br 换行
用户输入的标签:
  

  1. form标签
  一个容器,包住所有获取用户输入的标签
  - action属性
  - method属性
  - enctype属性
  2. input标签
  type
  text
  password
  email
  date

  checkbox
  radio


  button --> 普通按钮 --> 通常用JS给它绑定事件
  submit --> 提交按钮 --> 默认将form表单的数据提交
  reset --> 重置按钮 --> 将当前form中的输入框都清空
  3. select标签
  4. textarea标签

  5. form表单提交数据的注意事项
  {“k1”: "v1"}
  1. form标签必须把获取用户输入的标签包起来
  2. form不是from, form标签必须有action属性和method
  3. form中的获取用户输入的标签必须要有name属性

  

特殊标签:

<b id="666">加粗标签</b>
<i>斜体标签</i>
<u>下划线标签</u>
<s>删除标签</s>

<!--&lt;!&ndash;如何在页面上写 a>b b<a 这种&#45;&#45;,这里我们其实就要用到转义,在html里面叫特殊符号>-->
<p>b&lt;a</p> &lt; 小于号
<p>a&gt;b</p> &gt; 大于号
<p>&nbsb;</p> &nbsb;空格
<p>&copy;</p> &copy;版权的特殊符号
<p>&reg;</p> &reg;注册的特殊符号
<p>&yen;</p> &yen;钱的特殊符号
<hr>
<div>我是div标签</div>
<span>我是span标签</span>

例子:
  
<a href="https://www.luffycity.com/home" target="_blank">路飞学成</a>  target代表目标,_blank新页面打开
<a href="#666">屠龙宝刀,点击就送</a> #代表当前页面锚点,根据id=666唯一值实现一个和跳转,
页面内从一个位置跳到另一个位置。


标签的嵌套
标签可以嵌套标签
注意事项:
1. 尽量不要用内联标签包块儿级标签
2. p标签不能嵌套p标签
3. p标签不能嵌套div标签
有序列表,无序列表标签
<body>
<ul type="none"> #无序列表,type=none把前面的标识去掉
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol type="A" start="2"> #有序列表,type把前面的标识
<li>666</li>
<li>777</li>
<li>888</li>
</ol>
  <dl> 标题标签
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签:
<table border="1">  表格, border加上边框
<thead>
<tr>表头tr
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>常见</td>
<td>男</td>
<td>睡觉</td>
</tr>
<tr>
<td>许硕</td>
<td>男</td>
<td>电视剧</td>
</tr>
<tr>
<td>秃头</td>
<td>男</td>
<td>LOL</td>
</tr>
</tbody>

</table>

获取用户输入标签例子:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
<label for="i1">用户名:</label> <!-- label标签与输入框input建立关联,在点击文字时会跳转到输入框 -->
<input type="test" id="i1" placeholder="请输入用户名" value="灵感仰"><!--placeholder 提示性文本 value默认值 -->
<label >密码<!-- label标签也可以这样写-->
<input type="password">
</label>

<input type="date">
<input type="email">
<input type="checkbox">
<hr>
<input type="text">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<hr>
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="basketball" checked="checked">篮球,checked默认选中属性,当key和value属性一样可以简写
<input type="checkbox" name="hobby" value="doublecolorball">双色球
<input type="button" value="我是一个按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<hr>
<select name="city" >
<option value="010">北京</option>
<option value="020" selected>深圳</option>selected默认选中的意思
<option value="030">太原</option>
</select>

<select name="city" id="" multiple="multiple"> multiple方法用于多选
<option value="010">北京</option>
<option value="020">深圳</option>
<option value="030">太原</option>
</select>

<hr>
<textarea name="info" id="" cols="30" rows="10"></textarea>#textarea大段文本标签
<input type="file"><!--上传文件标签,需要注意在form表单需要加enctype="multipart/form-data" -->

2. input标签
type
text
password
email
date

checkbox 多选
radio 单选


button --> 普通按钮 --> 通常用JS给它绑定事件
submit --> 提交按钮 --> 默认将form表单的数据提交
reset --> 重置按钮 --> 将当前form中的输入框都清空
</form>

<form action="http://127.0.0.1:8080" method="post">
3. 获取用户输入的标签
1. form标签
一个容器,包住所有获取用户输入的标签
- action属性
- method属性
- enctype属性
<input type="text" name="alex">
<input type="submit">
</form>


</body>
</html>





HTML

标签:意思   classname   add   页面   爬虫   外部   快捷键   sub   常见   

原文地址:https://www.cnblogs.com/Selbst/p/12913809.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!