前端基础

域名

什么是域名

一个域名---->就是一个ip地址通过DNS解析得到的结果

web服务的本质

本质上就是浏览器（socket客户端）和服务器（socket服务端）直接进行通信

服务端：
    import socket
    sk=socket.socket()
    sk.bind(("127.0.0.1",8001))
    sk.listen()
    conn,addr=sk.accept()
    msg=conn.recv(1024).decode('utf-8')
    print(msg)
    conn.close()

客户端：
    import socket
    sk=socket.socket()
    sk.connect(("127.0.0.1",8001))
    sk.send("111".encode('utf-8'))
    sk.close()

html是什么？

官方答案：超文本标记语言（ Hypertext Marked Language ）

个人理解： 通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。

注意：html不是一中编程语言，而是一种标记语言。

html结构

<!DOCTYPE html>  		#声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
<html lang="en">  			 #是文档的开始标记和结束标记。此元素告诉浏览器自身是一个html文档，在他们之间是文档的头部<head>和主体<body>;lang表示页面主要的语言，无特别意义。
<head>  	#元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，
    <meta charset="UTF-8">		 #编码格式
    <title>Title</title>			 #定义网页标题，在浏览器标题栏显示。
</head>
<body>					# body之间的文本是可见的网页主体内容
</body>
</html>

html标签的语法

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

head内常用的标签

meta

meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

(1)name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 
	
1、Keywords (关键字)
　　说明：为搜索引擎提供的关键字列表
2、Description (简介)
　　　说明：Description用来告诉搜索引擎你的网站主要内容。
3、Author (作者)
　　　说明：标注网页的作者或制作组
4、Copyright (版权)
　　　说明：标注版权
5、Generator (编辑器)
　　　说明：编辑器的说明
6、revisit-after (重访)
	说明：重新访问
7、Robots (机器人向导)
　　　说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

(2)http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="content-Type" charset=UTF8">	#理解为表明编码格式
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />    #兼容IE

title

定义网页标题

style

定义内部css样式

script

定义js代码或者引入外部JS文件

引入外部样式表文件（外部导入css文件）

body中常用的标签

内敛标签(行内标签):不独占一行

简单的内敛标签
    <b>加粗</b>
    <i>倾斜</i>
    <u>下划线</u>
    <s>中划线</s>
    <button>按钮<button>
    <span>行内标签</span>
    <p>段落标签</p>

img图片标签
    <img src="图片路径" 网络绝对路径,本地相对路径都行
     alt="图片加载不出来的时候显示内容"
     title="鼠标移至图像显示内容"
     width="宽度"
     height="高度">

a 超链接标签
	<a href="链接的网址"></a>
   target=""是否新建窗口打开
   		target="_blank" 新建窗口打开
   		target="_self"  当前窗口打开

块级标签(行外标签):自己独占一行

简单的块级标签
	<h1>一级标题</h1>
    <h2>二级标题</h2>
    ~~~~~~
    <h6>六级标题</h6>
    <br>手动换行标签
    <hr>手动换行并且中横线分离(整个页面)

无序列表标签
    <ul >
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

    <ul type="设置无序列表最前标识的样式">
        disc(实心原点--默认)
        circle(空心原点)
        square(实心方块)
        none(无样式)

有序列表标签
    <ol type="a">
        <li>天一</li>
        <li>天二</li>
        <li>天三</li>
    </ol>

    <ol type="有序列表的样式">
        "a"小写字母
        "A"大写字母
        "I"罗马数字
    <ol type="a" start="起始字符">
        从哪一个字符开始

标题标签
    <dl>
        <dt>标题</dt>
        <dd>内容一</dd>
        <dd>内容二</dd>
        <dt>标题</dt>
        <dd>内容一</dd>
        <dd>内容二</dd>
    </dl>

    dt内为标题,dd内为内容,内容会自动向后table;一个标题可以有多个内容	

表格标签
<table>
    <thead>		#代表:表头
    
    <tr>		#代表:表头的一行
    
        <td>ID</td>		#一个td代表表头的一格
        <td>name</td>
        <td>age</td>
        <td>job</td>
        
    </tr>
    </thead>
    
    <tbody>		#代表:内容
    <tr>		#代表:内容的一行
        <td>1</td>	#代表:一个td代表内容的一格
        <td>luyi</td>
        <td>18</td>
        <td>student</td>
    </tr>
    </tbody>
</table>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<table  设置属性>
	border:表格外边框线的宽度
	cellpadding:内边距(边框和内容的边距)
	cellspacing:外边距(内外框的距离)
	width:表格宽度
	height:表格高度
	rowspan:竖向合并单元格
	colspan:横向合并单元格


label标签
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">

<label for="id属性"> </label>
	表示对那个ID属性标签进行标识
	效果:点击label标签中的文字,就能让标识的标签获得光标

textarea多行文本标签
<textarea> </textarea>
<textarea name="提交数据需要" cols="多少列" row="多少行"
		 

from表单
<from></from>

<from action="表单提交的路径(http://127.0.0.1,9001)"
	  name="分组名"
	  value="默认值"   #选择框值的提交需要有value


Input标签
<input type="类别">
	<input type="text">  #文本输入框
	<input type="password"> #密文输入框
	<input type="time"   #时间选择
	<input type="file"   #文件
	
	+ 单选框(组名相同的为一组)
		<input type="radio" name="组名">男  #单选框
		<input type="radio" name="组名">女  #单选框
		
	+ 多选框
		<input type="checkbox" name="组名" >
			checked="checked" 默认选中
				#属性名和值相同时简写:checked
	
	+ 只读模式
		#readonly 只能看不能写(只能限制输入框) 可以提交数据至后台
		#disabled 只能看不能操作(都可以限制) 不能提交数据至后台
		
		
	+ submit 表单提交按钮
		#input type="submit" 提交表单信息,然后刷新页面
		#<button></button>有可以提交表单信息
	
	
	+ select 下拉选择框(需要提交时需要写name)
		+ 下拉单选框
            <select>
                  <option value="1">什么呢</option>
                  <option value="2">不知道</option>
                  #selected 默认选中
            </select>
         + 下来多选框
         	 <select>
                <multiple>多选</multiple>
                <multiple>需要按住ctrl键</multiple>
                <multiple>有点蠢</multiple>
    		</select>
			#多选时需要按住ctrl键
	+ name 属性
		分组,提交时数据时的key,提交的数据value
	+ value 属性
		指定默认值
	+ chacked 默认选中属性

div块标签

<div></div>
	width设置块宽度
	height设置块高度
	position: fixed 块浮动

特殊字符

#空格   &nbsp
#左括号  &lt
#右括号  &gt
# &符号  &amp
#版权标识c  &copy
#版权标识r  &rec
#注释  <!--注释内容-->

1

posted @ 2019-11-27 21:54  路一  阅读(135)  评论(0)  编辑  收藏  举报