Javaa Development Backend Note - 0813 (HTML/CSS)

HTML: Hyper Text Markup Language

All tags can be nested, some have syntax requirements
Most tags have a start tag and a end tag, and one of them has a separate tag because it only has a single function or there is nothing to decorate to end within the tag

Basic formatting of HTML

  • < head> </head>Header Label
  • < body></body>body label
 <!-- Notes -->
  <html>
         <head>
                  Store accessibility information
        </head>
        <body>
                  Stored data
        </body>
  </html>

< head> </head>Header Label

  • Set page parameters: < meta charset="utf-8"/> (charset="utf-8": character encoding set)

  • Title label: < title></title>

  • Internal style label: < style></style>

  • External style label: (Chain import CSS file): < link href="css/demod.css" rel="stylesheet" type="text/css"/>

< body></body>body label

CS for setting labels through the style property: inline style

HTMLMeaning
<! - - xx - - >Notes
< html>< /html>Defines the entire HTML document
< head> < /head>Header Label
< meta charset="utf-8" />Setting Page Parameters
< title>< /title>Title Label
< body>< /body>Subject Label
< h1-6> < /h1-6>Title label: 1-6 from large to small
< p>< /p>Paragraph Label
< br/>Line Break: Force Line Break
< hr/>Horizontal line label
< b>< /b>Text bold display
< strong>< /strong>Text bold display
< em>< /em>Text Italic display
< i>< /i>Text Italic display
< sub>< /sub>subscript
< sup>< /sup>Superscript
< pre></ pre>Preformatted text with spaces
< ins>Definition Inserts - Underline Text
< del>Define Delete Word - Delete Text

  • Paragraph label: < h1>< / h1>

    Title label h1 ~ h6 from large to small

  • Horizontal line label: < hr/>

  • Force line break label: < br/>

  • Paragraph label: < p>< / p>

  • Picture label: < img></img>

    src property: Fill in the path of the current picture
    alt: when the src path is wrong, it will be displayed with a text band picture
    Title: picture title is displayed when the mouse hovers over the picture
    Width="x" width
    Height="y" height
    px: pixels

    	<!--picture centering : img For inline elements, a block element is required for centering. p/table/div)Modification -->
	<p align="center"> < img  src="img/1.jpg" /></p>		
	<div style="text-align: center;">
		<img class="image"  src="../img/1.jpg" alt="File load error" title="book" width="30%" height="50%"/>
	</div>

  • Hyperlink label: < a></ a>

    Tag a Jumps to Target Page
    Attributes:
    href: Set the target page to jump to (#: stands for hyperlink pseudoclass)
    Target="target window location"
    target="_blank" opens the target page on a new page
    target="_parent" opens the target page on the current page (default)
    name: Label names can be renamed
    id: The unique attribute of a tag tag cannot have a duplicate name

    <!--Empty Link -->
	< a href="showStudent.html"> </ a>
		
<!--Text Link -->
	< a href="showStudent.html">showStudent.html</ a>
		
<!--  page name#Marker Point name Attribute-->Anchor
	<a href="htmlA.html#bottom">htmla.html</a>
		
<!--pictures linking -->
	<a href="showStudent.html">
		<img src="img/hotel279174_03_xxx1213.jpg" width="100px" height="100px" />
	</a>

  • List label:

    • Unordered list: UL > Li
    • Ordered list: ol > Li
    • Custom list: DL > DT (title) dd (content)

  • Table label: < table></table> tr: row td column th: bold display

    table property:
    border:Border
    Width = 500px width
    height="500px" high
    align="center" table centered

    td attribute:
    align="center" content centered
    rowspan merge row cells
    colspan merge column cells

  • Form label: < form></ form>

    Name: the form name can be renamed
    id: Form name cannot be renamed
    action: Specify a handler for form data
    method: In what mode do you submit data get and post
    Example: < form action="" method="post"></form>

  • input tag

    	<!-- Text Box -->
	<input type="text" />
	
	<!-- Password box ****-->
	<input type="password" />
	
	<!--  Key  value: Written words-->
	<input type="button" value="confirm" />
	<!-- The Submit button is used to submit the form, in form Inside Label-->
	<input type="submit" />
	<!-- Reset button can only be used in forms -->
	<input type="reset"  />
	
	<!-- Numeric Selection Box  value: Default value-->
	<input type="number" value="1" />
	
	<!-- type="checkbox" Checkbox    adopt name Identical attributes grouped together   checked: Selected by default
	-->
	<input type="checkbox" name="hobby" /> <label>Basketball</label>
	<input type="checkbox" name="hobby" checked /> <label>Football</label>
	<input type="checkbox" name="hobby" /> <label>Tennis</label>
	
	<!-- type="radio"Single Selection Box Pass name Identical attributes grouped together through value Implement Radio Pass id Connect text to button-->
	<input type="radio" value="1" name="hobby" id="hobby1" /><label for="hobby1">Basketball</label>
	<input type="radio" value="2" name="hobby" id="hobby2" /><label for="hobby2">Football</label>
	<input type="radio" value="3" name="hobby" id="hobby3" /><label for="hobby3">Tennis</label>
	
	<!-- type="date" Date checkbox   value:Specify display as fixed date-->
	<input type="date" value="1994-02-02" />
	
	<!-- Text Fields    For file selection   name:Name-->
	<input type="file" name="file" />
	
	<!-- Hidden Fields-->
	<input type="hidden" value="test" name="" id="" />
	
	<!--  Search box -->
	<input type="search" />
	
	<!-- Color Selection Color RGB numerical value-->
	<input type="color" />
	
	<!-- As a picture img Use -->
	<input type="image" src="img/hotel279174_03_xxx1213.jpg" />
	
	<!-- Text Fields rows/cols:Initialization line/column-->
	<textarea rows="5" cols="5"> </textarea>
	
	<!--Drop-down box   selected:Selected by default -->
	<select>
		<option value="0">--Please select--</option>
		<option value="1">A</option>
		<option value="2">A</option>
		<option selected value="3">A</option>
		<option value="4">A</option>
	</select>

HTML5

< body></body>body label

  • Audio playback: < audio src="></audio>

    src = "": Audio path
    autoplay Opens Web Page Default Playback
    Controls: Display controls
    Loop: loop play
    preload: Audio is loaded when the page loads and ready to play

    	<audio src="static/Lensan - Acceptance.mp3" controls loop></audio>
		
	<audio controls loop>
		<!-- Set different file formats to match browser compatibility issues  -->
		<source src="static/Lensan - Acceptance.mp3" />
		<source src="static/Lensan - Acceptance.Wav" /> Your browser does not support it video Played Video
	</audio>

  • Video playback:

    src = "": Audio path
    autoplay Opens Web Page Default Playback
    Controls: Display controls
    Loop: loop play
    preload: Audio is loaded when the page loads and ready to play

    	<!-- width="500px" wide height="500px" high-->
	<video controls autoplay loop>
		<source src="static/china.mp4" />
		<source src="video/video.ogg" />
		<source src="video/video.webm" />
		Your browser does not support it video Played Video
	</video>

  • New Global Properties

    	<!--contenteditable  Specify whether users are allowed to edit content true/false-->
	<p contenteditable="true" class="green">This is an editable paragraph.</p>
	
	<!--designMode  Specify whether the entire page is editable-->
	<p class="blue" id="edit">I can become editable text.</p>
	
	<!--hidden Specify hiding elements    hidden="hidden"  -->
	<p hidden="hidden">This paragraph should be hidden.</p>
	
	<!--spellcheck  Specifies whether the element must be spelled or grammatically checked-->
	<p contenteditable="true" spellcheck="true">This is an editable paragraph. Try editing the text.</p>
	
	<!--tabindex Prescribed element tab Bond Overlay Order-->
	<input value="1" tabindex="3" />
	<input value="2" tabindex="1" />
	<input value="3" tabindex="2" />

    	<!-- action:Specify a handler for form data ;
	 method: In what mode do you submit data get and post-->

	<form action="DemoA.html" method="get">
		<!-- Mailbox: xx@xx.com Website: http: / https: -->
		<p>mailbox:<input type="email" name="email" /></p>
		<p>Please enter your web address:<input type="url" name="userUrl" /></p>
		
		<!--Numeric Grower-->
		<!--min:minimum value   max Maximum step growth-->
		<input type="number" name="num" min="3" max="20" step="3" value="3" />
		
		<!--Slide Grower-->
		<input type="range" name="point" min="1" max="100" step="1" value="1" />
		
		<!--time-->
		<p><input type="date"> </p>
		<p><input type="time"> </p>
		
		<!-- Submit Form -->
		<input type="submit" />
	</form>

  • Form validation:

    placeholder: hint
    required current text cannot be empty
    pattern regular expression

    	<form action="DemoA.html" method="get">
		<input type="text" placeholder="Please enter your account number" required pattern="\D"/>
		<!-- Submit Form -->
		<input type="submit" />
	</form>

  • Example of a pattern regular expression: phone number - 1[358]d{9}

    \w: an alphanumeric underscore
    \W: Not alphanumeric underscores
    \s: White space characters
    \d: A number
    \D: Not a number
    .. Any character except line breaks
    ^: Start of regular expression
    $: End of regular expression
    : Repeat multiple times such as \w*: multiple number letter underscores
    +: Repeat multiple times such as \w*: multiple number letter underscores
    ?: \w? A digit letter underline
    {6}: Fixed number \w{6} 6 digit letter underscores
    {6,}: Lower bound 6 \w{6,} At least 6 numeric letter underscores
    {6,9}: Lower limit 6 Upper limit 9 \w{6,9} 6 to 9 numeric letter underscores
    (130|131|132|...) |: or (): Indicates that 130 or 131 or 132 must be required
    [0-5]/ [a-e]: Interval condition
    [165]: Requires 1 or 6 or 5

css

  • Internal style label: < style></style>
  • External style label: (Chain import CSS file): < link href="css/demod.css" rel="stylesheet" type="text/css"/>
  • In-line style labels: CSS where labels are set by the style property
    Priority: Inline Style > Internal Style > External Style
  1. Internal Style/External Style - Selector ()
	 Label selector passes through the label name
			p{
				color: red;
				font-size: 15px;
			}
			<p></p>
			
	Class selector is controlled by class name 
			.classA{
				color: blue;
				font-size: 15px;
			}
			<Label class="classA"></Label>
			
	ID selector 
			#p1{
				color: salmon;
				font-size: 20px;
			}
			<Label id="p1"></Label>
			
	Priority: ID selector>Class selector>tag chooser 

Hierarchical selector:
	 Descendant Selector- body Label Layer Selection Position Under Label
			table tr td ul li {
				color: red;
			}
			
		<table border="1">
			<tr><td>
					<ul>
						<li>test<em>1</em></li>
					</ul>
			</td></tr>
		</table>

	 Subselector - Label ( id/class/Label selector)>Label
			#ul_li2>strong {
				color: blue;
			}
			
	 Neighbor Brothers Selector - Select a Neighbor Tag
			#ol_li2+li{
				color: blueviolet;
			}
	 Generic Brother Selector - Select remaining siblings under the same level of labels
			#ol_li2~li {
				color: blueviolet;
			}

 attribute selectors 
			  p # . [Attribute Name] Label elements that filter for the presence of current attributes   
			p[id]{
				color: red;
			}
			
			  p # . [Attribute name = value] Label elements that filter for the presence of current attributes and values   
			p[id=td_p2]{
				color: red;
			}
			label[class=classB]{
				color: red;
			}
			
			 p # . [Attribute Name=Value] In filtering label elements where the current attribute contains values  
			p[id *= p]{
				color: red;
			}
			
			p[id ~= val] p In element id Attribute value of an attribute val Attribute values that exist independently or separated from other attribute values can be selected by a space
			p[id |= val] p In element id Attribute values of attributes exist separately or are used between attribute values.-" Separated and attribute values val In "-" Front
			p[id ^= val] p Elemental id Attribute value contains val And be selected first
			p[id $= val] p Elemental id Attribute value contains val And at the end
  1. Font Style Configuration

  • Set font type: font-family:'Kai Type';

  • Set font size: font-size: px;

  • Font style: font-style: initial;

  • Set the font size: font-weight: bolder;/normal;

  • First line text indent: text-indent:20px;

  • Text line height: line-height:50px;

  • Text color: color:#00C

    rgb(0-255,0-255,0-255)
    rgba(0-255,0-255,0-255,0-1 transparency)

  • Horizontal alignment: text-align:right;

    Left arranges the text to the left. Default value: Browser-determined
    Right arranges the text to the right
    Center aligns text to the center
    justify for text alignment at both ends

  • Text decoration: text-decoration:line-through;

    none default, standard text defined
    Underline sets the underline of the text
    overline sets the underline of the text
    line-through sets the strikethrough of text

  1. Hyperlink css
<!--
	a:link	When access is not clicked
	a:visited	After Clicking Access
	a:hover	Mouse hovers over it
	a:active	Mouse click not released
-->
<style>
	a{
		/* Set Hyperlink to Remove Groundlines*/
		text-decoration: none;
	}
	a:link{
		color: red;
	}
	a:hover{
		color: yellowgreen;
	}
	a:active{
		color: blue;
	}
	a:visited{
		color: blueviolet;
	}
</style>
  1. List Style
  • Set list icon: list-style-image
  • Set list location: list-style-position
<style>
	<!--Unordered List-->
	ul li {
		/* Set list Icon */
		/*list-style-type:square;*/
		/*decimal:numerical value */
		/* circle: Hollow circle*/
		/*disc:disc */
		/*square:Solid Prescription*/
		/* Set list icons (use your own pictures) */
		list-style-image: url(img/book_no01.gif);
		/*list-style-position:inside;*/
	}
	<!--Ordered List-->
	ol li {
		/* lower-roman:  Roman numerals in lower case */
		/* upper-roman : Capital Rome means*/
		/* lower-alpha: Lower case English letters*/
		/* upper-alpha Capital English letters */
		/* hebrew: Hebrew Numbering */
		/* armenian: Armenian Number*/
		/* georgian:Georgia Number*/
		list-style-type: georgian;
		list-style-position:inside;
	}
</style>
  1. Page Settings
<style>
	body {
		/* Background color settings */
		background-color: rgb(215,215,215);
		background-image: url(../img/hotel279174_03_xxx1213.jpg);
		background-position: 200px 200px;
		/*  repeat-x Repeat repeat-y along x-axis Repeat no-repeat along y-axis: No repeat*/
		background-repeat: no-repeat;
		/* Color Background Picture x y Repeat  */
		/*background: yellow url(../img/hotel279174_03_xxx1213.jpg) 200px 200px no-repeat;*/			
	}
</style>
  1. div

Set border
border-width: 1px;
border-color: red;

border-style: solid;
none: do not display solid line dotted: dotted dashed: broken line double: double line
Groove:groove ridge ridge inset:inline effect border outset protrusion effect

High: height: 200px;
Width: width: 200px;
Background color: background-color: #9ACD32;
Outside margin: margin-top
Inside margin: padding-right
Floating: float
Clear floating:clear
Element positioning:position

<style>
		/* Margin */
		margin-top: 0px;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 0px;
				
		/* Define all margins */
		margin :0px;
		margin :3px 5px 7px;/* Upper Right and Lower*/
		margin :0px 0px 0px 0px;/* Upper Right Lower Left */
		
		/* Center labels by outer margins*/
		margin: 0px auto;
		
		/* Up and down, left and right */		
		margin :0px 10px;
				
		/* The distance from the contents of the inner margin to the border*/
		padding-right:10px;
		padding-left:10px;
		padding-top:10px;
		padding-bottom:10px;*/
		/* Upper Right Lower Left */
		padding:20px 5px 8px 10px ; 
		padding:10px;
		
		padding:10px 5px; /* Up and down, left and right */		
		padding:30px 8px 10px ; /* Upper Right and Lower*/
		
		/*Float - float property*/
		float:left	Elements Float Left
		float:right	Elements Float Right
		float:none	Default value, element does not float
		
		/*Clear Float - clear property*/
		clear:left	Elements are not allowed to float to the left
		clear:right	Elements are not allowed to float to the right
		clear:both Floating is not allowed on both sides
		clear:none	Default value, allow floating

		<!-- div Block-level elements can be positioned by floating them before clearing them of destruction -->
		/*Element positioning:position*/
		position:static;Default value, no positioning
		position:relative;Relative positioning
		position:absolute;Absolute positioning
		position:fixed;Fixed positioning
		
		/*position:relative;Relative Self-Positioning - No Floating*/
		/* Left */
		left: -20px;
		/* upper */
		top: -50px;
		/* right */
		right:20px;
		/* lower */
		bottom:30px;

		/*position:absolute;Absolute positioning - for block level elements*/
		/* Left */
		left: -20px;
		/* upper */
		top: -50px;
		/* right */
		right:20px;
		/* lower */
		bottom:30px;

		/*position:fixed;Fixed Positioning - For Pages*/
		/* Upper Left and Lower Right */
		/*left:/top:/right:/bottom:*/
</style>

Keywords: html css

Added by abalfazl on Thu, 23 Dec 2021 05:03:40 +0200

Popular Keywords

©2024 Programming VIP